A persistent row of menus, like a desktop app. The open tab slides between triggers, and holding Alt shows every access key.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/menubarPlayground
File, with a submenu
View, checkboxes
Profiles, radio group
Disabled trigger
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/menubar
Accessibility
- Uses the menubar, menu and menuitem roles with checkbox and radio variants.
- Triggers use one tab stop and arrow keys.
- Disabled rows are announced in place but skipped by keys.
- Shortcuts are listed, and every command also works from the menu.
Motion
- The open tab lifts onto surface and slides 200 ms on a spring between triggers.
- The menu drops in over 160 ms. Moving to another trigger swaps the content at once, so scanning stays fast.
- Access keys fade in over 120 ms.
- With reduced motion, the tab jumps and menus appear in place.
Responsive behavior
- Full width on Mobile with 15 px triggers. The bar scrolls sideways when it does not fit.
- Menus drop full width on Mobile, with 48 px rows, no keycaps, and submenus that drill in.
Performance
- One panel stays mounted while moving between menus. Content swaps by key with no fade.
- Alt and letter key listeners sit on window and are removed on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Menubar from @/components/fetaui/menubar after installing it. menus and label are required.
- entries uses the same row types as Dropdown Menu.
- Holding Alt shows access keys and a letter opens that menu, except in a text field. mnemonic overrides the default first letter.
- The rows in the demo have no handlers, so pass onSelect. Composes Menu, Kbd and the shared label motion.
Related
Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.CommandComponentA keyboard first menu for every action in the product, with fuzzy search, submenus and inline confirmation.Navigation MenuComponentA tray pill of triggers with soft panels that morph as you move across them.ToolbarComponentA floating tool dock for canvas apps. It holds the current tool on an ink plate and redocks to any edge.KbdComponentA keycap for showing keyboard input. One key per cap, grouped as a combo, chord or sequence.