UI components · Navigation
Menubar
Also called: Menu bar, App menu, Application menu, File menu
The "File, Edit, View, Help" row at the top of desktop software and online editors. Clicking each item opens a list of commands, which is how these apps organize lots of features.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a menubar at the top of the editor (role="menubar", 32px tall) with five menu titles: File, Edit, View, Insert, Help. Clicking a title opens its menu below, and once a menu is open, hovering another title switches to it directly. The Edit menu contains "Undo ⌘Z," "Redo ⇧⌘Z," a divider, "Cut ⌘X," "Copy ⌘C," "Paste ⌘V," a divider, and "Find and replace ⌘F," with the shortcuts right-aligned in gray. "Paste special" has a right arrow and opens a submenu on hover. Gray out commands that aren't available right now. Support the keyboard: left and right arrows switch titles, up and down move through options, Enter runs a command, and Esc closes the menu.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Menubar is what you need.
Use Menubar when
- Desktop-style tools with lots of commands, like online docs, spreadsheets, design tools, and code editors
- When dozens or hundreds of features need sorting by category, and users need a place to look up shortcuts
- Web apps that follow desktop software conventions, where users already know the "File / Edit / View" layout
Pick something else when
Page navigation on regular websites, marketing sites, and admin apps
Touch devices like phones, where hover switching and dense menus don't work well
Only three to five actions. Toolbar buttons are faster.
Use insteadToolbar
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Turning a website's page links into a menubar, so every click first opens a list and then navigates, adding an extra step
- 02
Putting the most common actions like Save and Undo only in the menus, with no toolbar button and no shortcut hint
- 03
Once a menu is open, hovering another title doesn't switch to it, so users have to close it and click again every time
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A horizontal row of menu titles, each with a menu that opens below it. Menus contain command items, shortcut hints, dividers, and submenus.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A menubar is a horizontal row of menu titles, like the "File Edit View Insert Format Help" at the top of Word, Figma, VS Code, or an online spreadsheet. Clicking one opens a list of commands below it, often with keyboard shortcuts next to them (⌘S, Ctrl+Z), and items with an arrow open a submenu. Once a menu is open, moving the mouse across the other titles switches the open menu to follow. It suits tool-style apps with lots of features, keeps hundreds of commands sorted by category, and helps users pick up the shortcuts along the way.
It often gets confused with the Navbar. Each navbar item is a link to another page. Each menubar item opens commands that act on the current document, and the page doesn't change. How it differs from a Toolbar: a toolbar turns the most common actions into a row of icon buttons you click directly. A menubar holds every command, and you have to open it to see them. The two are often stacked. A single "More" button that pops up a list of options is a Dropdown Menu. It's only a menubar when there's a whole row of them.
Regular websites and admin apps don't need a menubar. A navbar is enough. When you build one, support the keyboard: give the container role="menubar", use left and right arrow keys to move between titles, up and down to move between commands, and Esc to close. Show each command's shortcut next to it.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-menubar- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[role="menubar"]:not(.el-menu):not(nav *)[data-slot="menubar"].menubar.menu-bar
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
menubarmenu-barfile-menueditor-menumenu-strip
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
MenubarMenubarMenuMenubarTriggerAppMenuBar
- Semantic tags and roles
A weak signal. It only counts together with other cues.
role=menubar
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
repeated items
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026