Menubar
A horizontal menu bar with dropdown submenus, like a desktop application.
Import
import {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
MenubarSeparator,
} from "@retents/ui/menubar"Usage Guidelines
When to use
- For desktop-application-style menu bars with a File/Edit/View pattern.
- For tool-oriented interfaces where users need organized access to many actions.
- When the interface resembles a desktop application more than a typical website.
When NOT to use
- For website navigation — use NavigationMenu instead.
- For a single action menu — use DropdownMenu instead.
- On mobile-first interfaces — Menubar assumes a wide horizontal layout.
Preview
Usage
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New File</MenubarItem>
<MenubarItem>Open</MenubarItem>
<MenubarSeparator />
<MenubarItem>Save</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>