Menubar

A horizontal menu bar with dropdown menus, commonly used for application-level actions like File, Edit, and View.

Preview

Usage

tsx

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Booking <MenubarShortcut>Ctrl+N</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Save <MenubarShortcut>Ctrl+S</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Props

Prop	Type	Default	Description
`value`	`string`	—	The controlled value of the currently open menu.
`defaultValue`	`string`	—	The default open menu value.
`onValueChange`	`(value: string) => void`	—	Callback fired when the open menu changes.
`loop`	`boolean`	true	Whether keyboard navigation should loop around.

value

Type: string

Default: —

The controlled value of the currently open menu.

defaultValue

Type: string

Default: —

The default open menu value.

onValueChange

Type: (value: string) => void

Default: —

Callback fired when the open menu changes.

loop

Type: boolean

Default: true

Whether keyboard navigation should loop around.

Previous Navigation Menu Next Breadcrumb