Side Nav
The side navigation helps users navigate easily on websites that have multiple sections with numerous pages.
Dos
Use simple and direct labels for navigation items. Describe what a user will find in the section or on the page.
Variations
Accessibility
Keyboard Accessible
Users are able to use the keyboard to navigate through focusable content using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate. WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order. WCAG 2.4.3: Focus Order
Hover and Focus State:
The actionable items each have distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus
Color Contrast
A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability. WCAG 1.4.3: Contrast (minimum)
Responsive Design
The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow
Consistent
Styles are applied consistently including line height, font style, weight, spacing and color of text. WCAG 1.4.12: Text Spacing
Title
Use a clear and concise title that describes the pathway content WCAG 2.4.6: Headings and Labels
Layout
On mobile layouts, the side navigation is replaced by the contextual mobile navigation.
Guidelines
- The right chevron next to a nav item indicates there are child pages and should not be included if the nav item has no children.