Left navigation
The left navigation component is a 2-level hierarchical list of links that is used to navigate within parent and child pages of the section the user is currently in. The component is found in the campaign page with left nav template and the content page with left nav template. The left navigation component pulls from the taxonomy tree. If the page the user is currently on has children it will show that page as the parent. If the page the user is currently on doesn’t have children pages, it will reflect the other children under the current page’s parent.
When to use
- For section landing pages
- For lower level content pages
When not to use
- On higher level entry pages such as homepage, campaign pages and landing pages
Anatomy
- Parent page link
- Child page link
- Active page: this example is showing that “Choosing a dentist” doesn’t have any children pages so the left navigation is reflecting the other children under the parent page of “Choosing a doctor
Demos & variations
Desktop
Tablet & mobile
Displays as dropdown menu.
Placement
Desktop
Placed on the left side of the layout and top aligned to the main content of the page.
Tablet & mobile
Responsive variation of the left navigation component will fall directly below the global header and breadcrumb (if present).
Behaviors
Mouse
Users can click on the page link to navigate to selected page.
Keyboard
Users can navigate between page links by pressing Tab and Shift-Tab. Users can trigger the page link by pressing enter.