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