Skip to main content
The Menubar component provides a horizontal menu bar typically used for application-level navigation and commands.

​
Installation

import { Menubar } from "@craftdotui/baseui/components/menubar";

​
Usage

This component is built on @base-ui/react’s Menubar primitive. It provides a horizontal container for multiple dropdown menus.
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarPortal>
      <MenubarPositioner>
        <MenubarPopup>
          <MenubarItem>New</MenubarItem>
          <MenubarItem>Open</MenubarItem>
          <MenubarItem>Save</MenubarItem>
        </MenubarPopup>
      </MenubarPositioner>
    </MenubarPortal>
  </MenubarMenu>
  
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarPortal>
      <MenubarPositioner>
        <MenubarPopup>
          <MenubarItem>Cut</MenubarItem>
          <MenubarItem>Copy</MenubarItem>
          <MenubarItem>Paste</MenubarItem>
        </MenubarPopup>
      </MenubarPositioner>
    </MenubarPortal>
  </MenubarMenu>
</Menubar>

​
Features

  • Horizontal menu layout
  • Multiple dropdown menus
  • Keyboard navigation between menus
  • Supports all Menu features (items, groups, checkboxes, etc.)
  • Application-level menu pattern

​
Examples

​
Application Menubar

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarPortal>
      <MenubarPositioner>
        <MenubarPopup>
          <MenubarItem>New File</MenubarItem>
          <MenubarItem>Open</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Save</MenubarItem>
          <MenubarItem>Save As</MenubarItem>
        </MenubarPopup>
      </MenubarPositioner>
    </MenubarPortal>
  </MenubarMenu>
  
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarPortal>
      <MenubarPositioner>
        <MenubarPopup>
          <MenubarItem>Undo</MenubarItem>
          <MenubarItem>Redo</MenubarItem>
        </MenubarPopup>
      </MenubarPositioner>
    </MenubarPortal>
  </MenubarMenu>
  
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarPortal>
      <MenubarPositioner>
        <MenubarPopup>
          <MenubarCheckboxItem>Sidebar</MenubarCheckboxItem>
          <MenubarCheckboxItem>Toolbar</MenubarCheckboxItem>
        </MenubarPopup>
      </MenubarPositioner>
    </MenubarPortal>
  </MenubarMenu>
</Menubar>

​
Accessibility

  • Built on @base-ui/react for ARIA compliance
  • Keyboard navigation (Arrow keys between menus)
  • ARIA menubar pattern
  • Focus management
  • Screen reader support

Build docs developers (and LLMs) love

Get started for freeTalk to us