Sidebar navigation helps users navigate by displaying pages within a topic or section.
Wherever possible, limit the number of parent navigation items to 10 and the children within a parent section to 15. If the side navigation is too long, users may miss items at the bottom. If there are too many levels, users may miss items that require too many clicks.
Parent items with children should always include a chevron. Parent items without children don’t require a chevron.
Only expand active subsections to emphasize which section the user is in and to reduce visual complexity.
Keep the navigation link text short.
Sidebar navigation should be displayed at the top of the sidebar on inner pages within the main City of Winnipeg site.
How it works
Add the class active to the active li and to the current page item. Use buttons with dropdown arrows to indicate any nav items that have children pages.
If the current active page is a child page, the dropdown menu should be expanded by default. Add the class show to the parent li and parent ul to show the menu, and active on the current page item for active styling.
Up to three levels can be displayed.
If your control element is targeting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.