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

Submenu

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


Description

  • The submenu is positioned at the top of the screen and right of the main menu.
  • The submenu sticks to the top of the screen. When a user scrolls down, the submenu will remain on the top position.
  • It contains a list of items which are available within selected item from the main menu.
  • The maximum number of items in submenu is 7. If items exceed that number, the remaining items 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.

Usermenu dropdown

  • On the right side of the submenu there is the confer the user menu. On click it shows a menu contains the different related sections
  • The links of the dropdown menu become #00C081 on mouseover.
  • When the length of other elements of the submenu exceed the available space
  • In case the user name or the email in this menu would be larger than the available space the text would be truncated with 3 dots “…” When this happen a tooltip appears on mouseover showing the full content of the truncated text:bootstrap tooltip