🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Menu Bar

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

View Demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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 [email protected]{breakpoint} class modifiers:

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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us