Go to Content
Design System
Playroom Storybook
#ClimateEmergency

Secondary Navigation

There is an option for nested items to represent functions on the 3rd level. Simply add another unordered list inside an item on the 2nd level. 3rd-level items will only be visible when the item on the 2nd level is selected.

HINT To achieve the slideUp/Down effect when opening/closing a 3rd-level list, use bootstrap’s collapse. By doing so, proper accessibility attributes (i.e. the aria-expanded state) will be added automatically.

Loading demo…
Rules For Accessibility
  • Indicate menu items with submenus by using aria-haspopup="true".
  • Use aria-expanded="true"/"false" to inform the user if the menu is currently collapsed or expanded.
  • Submenus can be expanded and reached by mouse AND keyboard, i.e. don’t rely on things like hover.