Menu Bar

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

Dependencies

• Menu

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

If you need to customize the style of the dropdown element (small devices layout only), you can use the data-menu-class attribute on the .menu-bar element: set it equal to the custom class (or list of classes) you want to add to the dropdown element.

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
}

⭐️ Icons by Nucleoapp.

Categories

• Navigation > Misc
• Controls

Bug report & feedback

Component Github page ↗