Menubar

A desktop-style menu bar with menus and items.

Updated 2026-06-22

Default

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New Tab</MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent><MenubarItem>Undo</MenubarItem><MenubarItem>Redo</MenubarItem></MenubarContent>
  </MenubarMenu>
</Menubar>

A desktop-style menu bar with menus and items. Submenus are not yet a first-class part — only a MenubarSubTriggerChevron icon primitive ships; no MenubarSub/MenubarSubTrigger/MenubarSubContent components are exported.

Installation

railbase ui add menubar

Note

railbase ui add also copies shared primitives — they ship alongside this component automatically.

Usage

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@/lib/ui/menubar.ui";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New</MenubarItem>
      <MenubarItem>Open</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Anatomy

Exported parts: Menubar · MenubarMenu · MenubarTrigger · MenubarContent · MenubarItem · MenubarCheckboxItem · MenubarRadioGroup · MenubarRadioItem · MenubarLabel · MenubarSeparator · MenubarShortcut · MenubarGroup · MenubarPortal · MenubarSubTriggerChevron

Was this page helpful?Thanks for your feedback!