Railbase
GPTClaude

Menubar

A desktop-style menu bar with menus, items, and submenus.

Updated

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, items, and submenus.

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";

<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

← PreviousLabelNext →Navigation Menu