💠 Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Usage

The Menubar component is a horizontal strip of menus commonly found in desktop applications and is increasingly integrated into web applications for its familiarity and ease of access.

It provides quick access to a consistent set of commands, often including file operations, settings, and other application-wide functions.

This UI pattern is typically located at the top of the application window, just below the title bar.

When to use

• Desktop applications: Employ a Menubar in desktop applications or complex web applications that require a comprehensive set of functionalities accessible at all times.
• Quick access to functions: Utilize a Menubar to provide users with quick access to frequently used functions, improving efficiency and productivity.
• Feature-rich platforms: Menubars are especially useful in feature-rich platforms where numerous features and settings might overwhelm a simpler navigation structure.
• Consistency in multi-window applications: In applications where multiple windows or views are present, a Menubar maintains a consistent set of commands accessible from any point within the application.

Avoid using Menubars in simple web applications where a more straightforward navigation system would suffice. They should not be used to house context-specific actions that would be better placed closer to where they are relevant in the UI. Be mindful of not overcrowding the Menubar, which can lead to difficulty in finding commands and a cluttered user interface.

Examples

Default

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Menu Button WAI-ARIA design pattern (opens in a new tab) and uses roving tabindex (opens in a new tab) to manage focus movement among menu items.

Keyboard interactions