The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.

Main menu

The menu provides a list of choices for the user. The main menu is used for quick access to a consistent list of items.

Visit the layout demo page.


  • The main menu is always positioned on the left side of the screen.
  • In big screens, the main menu starts off as uncollapsed, while in medium screens it starts off as collapsed.
  • It contains a list of items which are always available.
  • It may contain dropdown groups, which allow the user to choose one value from the list. When the dropdown is inactive, it displays a single value.
  • The menu has 3 responsive breakpoints: bigger than 1336px, 770px - 1336px and less than 770px.
  • The background color is $eos-bc-pine-500.
  • It contains a menu icon on the top-right corner to allow users collapse the menu in order to increase the space in the content area.