Menubar — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download menubar -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
} from "@/components/ui/menubar";
<Menubar>
  <MenubarMenu>
    <MenubarTrigger isDisabled={false}>
      File
    </MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New file</MenubarItem>
      <MenubarItem>Save</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>;

Examples

Default

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarShortcut,
} from "@/components/ui/menubar";
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New window <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <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>
      <MenubarItem>Zoom in</MenubarItem>
      <MenubarItem>Zoom out</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

MenubarCheckboxItem

Prop	Type	Default	Description
`inset`	`boolean`	`—`

MenubarItem

Prop	Type	Default	Description
`inset`	`boolean`	`—`
`variant`	`"default" \| "destructive"`	`"default"`

MenubarLabel

Prop	Type	Default	Description
`inset`	`boolean`	`—`

MenubarRadioItem

Prop	Type	Default	Description
`inset`	`boolean`	`—`

MenubarSubTrigger

Prop	Type	Default	Description
`inset`	`boolean`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.