When to use
The Nav List component should be used as a side navigation to enable user to jump through different sections of an application. Usually, it is used alongside a primary (main) navigation. In that case, the main navigation would have a site-wide purpose, where the Nav List only focusses on the current environment the user is viewing.
Behaviour
A Nav List houses collapsible side content. As also stated on the overview page, the (toggle) button control attached to the Nav List operates the action to either collapse or expand the Nav List.
Besides that, individual list items are expandable until the third level, which enables the user to view the items that are related to it by navigating one level deeper. This is made clear by the down arrows on the right side of the list items. This only applies to the first two levels, as the Nav List doesn’t go beyond a third level.
Placement
A Nav List serves as a (secondary) side navigation and is therefore positioned beside page content. It should always be left-aligned and could either be positioned within the grid system or as a fixed positioned component.
Accessibility considerations
When implementing the Nav List component, consider the following accessibility guidelines:
- Limit nesting levels: Keep the navigation structure to a maximum of three levels deep to reduce complexity and improve navigation for users with cognitive disabilities.
- Manage cognitive load: Avoid overwhelming users by limiting the number of list items at each level. A good rule of thumb is to keep it under 7-9 items per level.
- Prioritize content visibility: Ensure that crucial actions or essential content are not hidden within the collapsible navigation. Important information should be readily accessible without requiring navigation through multiple levels.
- Keyboard navigation: Ensure that all navigation items are accessible via keyboard controls, allowing users to navigate through the list using arrow keys and activate items with the Enter key.
- Screen reader compatibility: Use proper ARIA labels and roles to ensure that screen readers can accurately convey the structure and state (expanded/collapsed) of the navigation items.
- Color contrast: Maintain sufficient color contrast between text and background colors for all navigation states (default, hover, active, selected) to ensure readability for users with visual impairments.
By adhering to these accessibility considerations, you can create a Nav List component that is inclusive and user-friendly for all users.