Menus & Navigation

Menubar

Desktop-style menu bar with File / Edit / View menus.

Import

tsx

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarShortcut } from "@cronus-ui/ui";

bash

npx cronus-ui add menubar

Examples

Menus

A desktop-style menu bar with File / Edit / View menus — shortcuts, a checkbox and a radio group.

tsx

function MenubarDemo() {
  const [showFullPath, setShowFullPath] = useState(true);
  const [profile, setProfile] = useState("benoit");

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab
            <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print…
            <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo
            <MenubarShortcut>⇧⌘Z</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked={showFullPath} onCheckedChange={setShowFullPath}>
            Always Show Full URLs
          </MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarRadioGroup value={profile} onValueChange={setProfile}>
            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
            <MenubarRadioItem value="evil-rabbit">Evil Rabbit</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component MenubarDefault layout:inline style:menubar {
  label "File"
  text "New Tab"
  text "Open"
}

page "/audit/menubar/default" type:custom {
  use MenubarDefault
}

API Reference

Generated from the component's exported types.

MenubarMenuProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Menu>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`children`	`ReactNode`	—	Contents of the component.

MenubarGroupProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Group>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.

MenubarPortalProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Portal>

Prop	Type	Default	Description
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.

MenubarSubProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Sub>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.

MenubarRadioGroupProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioGroup>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.

MenubarProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.
`dir`	`"ltr" \| "rtl"`	—	Reading direction. Inherits from the document when omitted.
`loop`	`boolean`	—	When true, keyboard navigation wraps around the ends.

MenubarTriggerProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

MenubarSubTriggerProps

Extends ComponentPropsWithoutRef< typeof MenubarPrimitive.SubTrigger >

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.

MenubarSubContentProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

MenubarContentProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

MenubarItemProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

MenubarCheckboxItemProps

Extends ComponentPropsWithoutRef< typeof MenubarPrimitive.CheckboxItem >

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state. Pair with `onCheckedChange`.
`onCheckedChange`	`(checked: boolean) => void`	—	Called with the next checked value whenever the control toggles.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

MenubarRadioItemProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

MenubarLabelProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Label>

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

MenubarSeparatorProps

Extends ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.

MenubarShortcutProps

Extends HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.