Navigation menu

The difference between a navigation menu and a menu is not what it looks like, it is what happens when you pick something. A menu item runs a command against the thing you are working on: rename, duplicate, export. A navigation menu item takes you to a place, and the places are still there when you come back. That is why its items are links with real addresses, openable in a new tab, copyable, and announced as links rather than as menu items.

That distinction has an accessibility spelling. The ARIA menu role and its keyboard model (arrow keys move between items, Tab leaves the whole menu) were written for application commands, and putting it on a site’s header makes a screen reader promise a command surface the reader is not in. A header full of destinations is better as a list of links inside a nav, with the items that open panels marked as expandable buttons. Base UI’s Navigation Menu is exactly this shape: links and grouped panels, not a menubar.

One panel at a time is the behaviour worth getting right. The trigger opens its own panel and closes whichever was open, so the header never stacks two, and dismissal is explicit: choose a link, press Escape, or press outside. Panels should be positioned out of the flow so the page below them holds still, and the trigger should stay lit while its panel is down, since that is the only thing telling a reader which of five headings they are inside.

Two neighbours are often mistaken for it. A menu bar is the application’s own command surface (File, Edit, View) and genuinely wants the menu role. A mega menu is a shape a navigation menu can take, one wide panel of grouped links spanning the header, rather than a different thing: if the panel is narrow and there are several of them, navigation menu is the word for the whole apparatus.