UI Controls Dictionary > Menu Bars
Menu bars allow users to navigate using categories and sub-categories. They are persistent and unchanging across the app.
In a desktop application, menu bars are the items across the top of the application, a.k.a. the File menu. On the web, they reside in the header/top of the page. In both cases, they can support nested menus or work as stand-alone categories (also called "monocline grouping" or flat structure).
They should be used for categories of the application or site that are meaningful across its entire use, provided there are not too many categories. If there are too many categories to fit across the page, consider vertical navigation instead.
The main advantage of menu bars is their persistence, i.e., the fact that they are always accessible. This is highlighted in "About Face: The Essentials of Interaction Design":
Well-designed Web sites make careful use of persistent objects that remain constant throughout the shopping experience, especially the top-level navigation bar along the top of the page. Not only do these areas provide clear navigational options, but their consistent presence and layout also help orient customers.
Menu bars can contain sub-menus (as shown above), but going any deeper than one level should be avoided if possible because it pushes users' mental models, whereas "organizing things into a single layer of groups is extremely common and can be found everywhere in your home and office."
The macOS Human Interface Guidelines provide a comprehensive guide to using menus in desktop applications (many of which apply to websites as well).1 Some highlights:
Other important menu bar guidelines:
Like tabs and vertical navigation, menu bars should have a clear selected state, usually indicated by high-contrast text (or inverting the unselected style) and possibly making it bold. A hover state should also be used.
To keep the header compact, other functions can be merged into the menu bar area, such as a search box or important actions (e.g., sign in/out). One term for this is "extended header".
For more complex hierarchies, a "mega menu" overlay can be used, showing multiple columns of sub-categories (or even an additional level of nesting). When using them, pay close attention to the implementation details, especially around the timing of when the menu is triggered and hidden.