components / 27

marked menubar

menus share one keyboard rhythm. the ink moves between them without replacing the operating system grammar people already know.

shadcnnpx shadcn@latest add berkantay/cheez/marked-menubar

live

one continuous command line

last action: waiting

untitled.cheez

01ideas should leave
a visible trace.rulers on · no wrap · ink

size

ink

character

try it properly

open a menu, then use left and right to switch. down enters. typing jumps by label.

<MarkedMenubar size="medium" tone="orange" character="rushed">
  <MarkedMenubarMenu>
    <MarkedMenubarTrigger>file</MarkedMenubarTrigger>
    <MarkedMenubarContent>
      <MarkedMenubarItem>new page</MarkedMenubarItem>
      <MarkedMenubarSubmenu>
        <MarkedMenubarSubmenuTrigger>export as</MarkedMenubarSubmenuTrigger>
        <MarkedMenubarSubmenuContent>
          <MarkedMenubarItem>png</MarkedMenubarItem>
        </MarkedMenubarSubmenuContent>
      </MarkedMenubarSubmenu>
    </MarkedMenubarContent>
  </MarkedMenubarMenu>
</MarkedMenubar>

switching

four menus, one focus system

Base UI owns the hard parts

01 · enteropen file

Enter, Space, or ArrowDown opens the focused trigger.

02 · crossmove to edit

Left and Right switch menus without returning focus to the page.

03 · descendopen recent

ArrowRight enters a submenu; ArrowLeft returns to its parent.

04 · leaveescape safely

Escape closes the current layer and restores the expected focus.

memory

actions disappear, choices remain

temporary underline · persistent enclosure

actionsaveunderline while highlighted

checkboxshow rulers ✓circle while checked

radioink ●one choice within a group

dangerremove feedbacksemantic pink, never just decoration

voice

same grammar, different pressure

size and character belong to the root

smallcalm

mediumrushed

largechaotic

reference

api

compound pieces, native responsibilities

part	prop	type	default	purpose
Menubar	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	composite focus direction
Menubar	`loopFocus`	`boolean`	`true`	wrap focus between menu triggers
Menubar	`modal`	`boolean`	`true`	contain interaction while a menu is open
Menubar	`size`	`"small" \| "medium" \| "large"`	`"medium"`	trigger and popup density
Menubar	`tone`	`MarkedMenubarTone`	`"orange"`	persistent selection ink
Menubar	`character`	`CheezCharacter`	`"calm"`	shared drawing personality
Menubar	`color`	`string`	`tone color`	custom persistent ink
Menubar	`interactionColor`	`string`	`"#35d9ff"`	hover and keyboard ink
Trigger	`mark`	`CheezType`	`"loose-circle"`	open-menu mark
Trigger	`interactionMark`	`CheezType`	`"short-underline"`	hover and focus mark
Content	`sideOffset`	`number`	`7`	distance from its trigger
Item	`disabled`	`boolean`	`false`	skip pointer and keyboard interaction
Item	`tone`	`"default" \| "danger"`	`"default"`	destructive semantic color
CheckboxItem	`checked`	`boolean`	`—`	controlled multiple selection
RadioGroup	`value`	`any`	`—`	controlled single selection
SubmenuTrigger	`openOnHover`	`boolean`	`false`	optional hover disclosure
Shortcut	`span props`	`—`	`presentational keyboard hint`

behavior notes

Base UI supplies roving focus, typeahead, collision handling, and dismissal
opening one root menu lets pointer movement and arrow keys switch to its siblings
actions use a temporary interaction mark; checked and selected items keep their mark
submenus are independent focus layers and can optionally open on hover
shortcuts are visual hints only; wire application-level key bindings separately
disabled items remain visible but are skipped by keyboard navigation
all drawing motion comes from Cheez and respects reduced-motion preferences