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

info
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.
close

Submenu

The submenu is the secondary menu. It is a menu that is contained within the main menu.

Visit the layout demo page.


linkDescription

  • The submenu is positioned at the top of the screen and right of the main menu.
  • The submenu is fixed to the top of the screen. When a user scrolls down, the submenu will remain at the top position of the screen.
  • It contains a list of items which are available within the selected item from the main menu.
  • The maximum number of items in the submenu is 7. If there are more items, the remaining ones will appear as a dropdown list within the more_horiz icon.
  • It should always display the maximum number of visible items (but never more than 7 in big screens) according to the size of the screen. The submenu should calculate the available space and move items into the more_horiz dropdown as they exceed the size.
  • The background color is $eos-bc-pine-500.

linkUser menu dropdown

  • The user menu is found at the outmost right side of the submenu. The user icon is used as a toggle for its display.User dropdown example
  • On hover the text colour of the links in the dropdown is $eos-bc-pine-500 and background color for hover $eos-bc-green-100. When active it has text color $eos-bc-white and background color $eos-bc-green-500. Go to the dropdown page for more information about this component.User dropdown link example
  • The minimum length of the dropdown is 200px and the maximum is 300px. When the length of the submenu item exceeds the available space, it will break into two lines.User dropdown maximum text length
  • In case a user's name or the email address is larger than the available space, the text will be truncated with 3 dots “…”. When this happens, a tooltip appears on mouseover showing the full content of the truncated text.Truncated user name with dropdown example