Components

Menubar

A visually persistent menu bar that provides quick access to a consistent set of commands.

example.tsx

Import

tsx

import {
  AppMenubar,
  AppMenubarMenu,
  AppMenubarTrigger,
  AppMenubarContent,
  AppMenubarItem,
  AppMenubarSeparator,
  AppMenubarShortcut,
  AppMenubarLabel,
  AppMenubarCheckboxItem,
  AppMenubarRadioGroup,
  AppMenubarRadioItem,
  AppMenubarSub,
  AppMenubarSubTrigger,
  AppMenubarSubContent,
} from "@/components/primitives/AppMenubar"

Structure

Each menu in the bar is a AppMenubarMenu containing a AppMenubarTrigger and an AppMenubarContent. Items, separators, labels, and shortcuts nest inside the content.

tsx

<AppMenubar>
  <AppMenubarMenu>
    <AppMenubarTrigger>Menu label</AppMenubarTrigger>
    <AppMenubarContent>
      <AppMenubarItem>Action</AppMenubarItem>
      <AppMenubarSeparator />
      <AppMenubarItem>
        Another action <AppMenubarShortcut>⌘K</AppMenubarShortcut>
      </AppMenubarItem>
    </AppMenubarContent>
  </AppMenubarMenu>
</AppMenubar>

Submenus

Nest AppMenubarSub inside content to create a cascading submenu.

tsx

<AppMenubarItem>Share</AppMenubarItem>
<AppMenubarSub>
  <AppMenubarSubTrigger>More tools</AppMenubarSubTrigger>
  <AppMenubarSubContent>
    <AppMenubarItem>Save as…</AppMenubarItem>
    <AppMenubarItem>Create shortcut…</AppMenubarItem>
  </AppMenubarSubContent>
</AppMenubarSub>

API Reference

All AppMenubar* components extend their underlying Radix UI primitives and accept all their props.

Component	Description
AppMenubar	Root container. Renders the menu bar.
AppMenubarMenu	Wraps a single menu (trigger + content).
AppMenubarTrigger	Button that opens the menu content.
AppMenubarContent	Dropdown panel containing menu items.
AppMenubarItem	A single actionable menu entry.
AppMenubarLabel	Non-interactive group label.
AppMenubarSeparator	Visual divider between items.
AppMenubarShortcut	Keyboard shortcut hint displayed on the right.
AppMenubarCheckboxItem	A toggleable checkbox item.
AppMenubarRadioGroup	Groups radio items for single selection.
AppMenubarRadioItem	A selectable radio item.
AppMenubarSub	Wrapper for a nested submenu.
AppMenubarSubTrigger	Item that opens the submenu.
AppMenubarSubContent	Content panel for the submenu.

Source

src/components/primitives/AppMenubar.tsx

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarPortal,
  MenubarGroup,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarShortcut,
} from "@/components/ui/menubar"

const AppMenubar = Menubar
const AppMenubarMenu = MenubarMenu
const AppMenubarTrigger = MenubarTrigger
const AppMenubarContent = MenubarContent
const AppMenubarItem = MenubarItem
const AppMenubarSeparator = MenubarSeparator
const AppMenubarLabel = MenubarLabel
const AppMenubarCheckboxItem = MenubarCheckboxItem
const AppMenubarRadioGroup = MenubarRadioGroup
const AppMenubarRadioItem = MenubarRadioItem
const AppMenubarPortal = MenubarPortal
const AppMenubarGroup = MenubarGroup
const AppMenubarSub = MenubarSub
const AppMenubarSubContent = MenubarSubContent
const AppMenubarSubTrigger = MenubarSubTrigger
const AppMenubarShortcut = MenubarShortcut

export {
  AppMenubar,
  AppMenubarMenu,
  AppMenubarTrigger,
  AppMenubarContent,
  AppMenubarItem,
  AppMenubarSeparator,
  AppMenubarLabel,
  AppMenubarCheckboxItem,
  AppMenubarRadioGroup,
  AppMenubarRadioItem,
  AppMenubarPortal,
  AppMenubarGroup,
  AppMenubarSub,
  AppMenubarSubContent,
  AppMenubarSubTrigger,
  AppMenubarShortcut,
}