Menu Bar

Application menu with a list of common actions that users can perform.

How To

The Menu Bar component is used to provide access to a set of functionalities that the user commonly performs.

Responsiveness#

On smaller devices, you may need to group some actions into a single dropdown. To do so, add the .menu-bar__item--hide class to the menu items you wish to hide/group by default. These items will be replaced by a button ( .menu-bar__item--trigger ) that triggers their visibility. The menu items that don't have the .menu-bar__item--hide class will always be visible.

You can make all actions visible at a specific breakpoint using one of the .menu-bar--expanded@{breakpoint} class modifiers:

• menu-bar--expanded@xs
• menu-bar--expanded@sm
• menu-bar--expanded@md
• menu-bar--expanded@lg
• menu-bar--expanded@xl

Customization#

To make customization easier, the component includes a set of CSS custom properties:

:root {
  --menu-bar-button-size: 2.5em; // size of the menu buttons
  --menu-bar-icon-size: 1em; // size of the icons inside the buttons
  --menu-bar-horizontal-gap: var(--space-xxs); // horizontal gap between buttons
  --menu-bar-vertical-gap: 4px; // vertical gap between buttons and labels (tooltips)
  --menu-bar-label-size: var(--text-xs); // label font size
}