Menubar

A visually persistent menu common in desktop applications that provides quick access to commands.

CMSPayload CMS Integration

Menubar structure can be managed through CMS fields for admin interfaces and application dashboards with customizable menu items.

Basic Usage

MenubarA desktop-style application menu

Installation

pnpm add @corew500/ui

Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
} from "@mordecai-design-system/ui"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

With Submenus

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo</MenubarItem>
      <MenubarItem>Redo</MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Find</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Search the web...</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Find...</MenubarItem>
          <MenubarItem>Find Next</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With Checkbox Items

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked>
        Show Toolbar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem>
        Show Sidebar
      </MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem>Full Screen</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With Radio Items

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarLabel>Panel Position</MenubarLabel>
      <MenubarRadioGroup value="bottom">
        <MenubarRadioItem value="top">Top</MenubarRadioItem>
        <MenubarRadioItem value="bottom">Bottom</MenubarRadioItem>
        <MenubarRadioItem value="right">Right</MenubarRadioItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Sub-components

| Component | Description | |-----------|-------------| | Menubar | Root container | | MenubarMenu | Individual menu dropdown | | MenubarTrigger | Button that opens the menu | | MenubarContent | Dropdown content container | | MenubarItem | Clickable menu item | | MenubarSeparator | Visual divider | | MenubarLabel | Non-interactive label | | MenubarShortcut | Keyboard shortcut display | | MenubarGroup | Group of related items | | MenubarSub | Submenu container | | MenubarSubTrigger | Submenu trigger | | MenubarSubContent | Submenu content | | MenubarCheckboxItem | Toggleable checkbox item | | MenubarRadioGroup | Radio button group | | MenubarRadioItem | Radio button item |

Props

Menubar

Prop	Type	Default	Description
`modal`	enum	`true`	Whether the menubar is modal.
`disabled`	enum	`false`	Whether the whole menubar is disabled.
`orientation`	enum	`'horizontal'`	The orientation of the menubar.
`loopFocus`	enum	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

MenubarCheckboxItem

Prop	Type	Default	Description
`checked`	enum	—	Whether the checkbox item is currently ticked. To render an uncontrolled checkbox item, use the `defaultChecked` prop instead.
`defaultChecked`	enum	`false`	Whether the checkbox item is initially ticked. To render a controlled checkbox item, use the `checked` prop instead.
`onCheckedChange`	(checked: boolean, eventDetails: MenuRootChangeEventDetails) => void	—	Event handler called when the checkbox item is ticked or unticked.
`onClick`	MouseEventHandler<HTMLElement>	—	The click handler for the menu item.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`label`	string	—	Overrides the text label to use when the item is matched during keyboard text navigation.
`id`	string	—	@ignore
`closeOnClick`	enum	`false`	Whether to close the menu when the item is clicked.
`nativeButton`	enum	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

MenubarRadioItem

Prop	Type	Default	Description
`value*`	any	—	Value of the radio item. This is the value that will be set in the MenuRadioGroup when the item is selected.
`onClick`	MouseEventHandler<HTMLElement>	—	The click handler for the menu item.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`label`	string	—	Overrides the text label to use when the item is matched during keyboard text navigation.
`id`	string	—	@ignore
`closeOnClick`	enum	`false`	Whether to close the menu when the item is clicked.
`nativeButton`	enum	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.