Go to Content
Design System
Playroom Storybook
🌹 Graz - George Design System stands in solidarity with the victims and families affected by the tragic school shooting in Graz. Our hearts go out to all those impacted by this senseless act of violence.

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.