Side navigation
Component library
How to use this component
Select the Side Navigation component for pages with a significant number of sibling pages. This component is placed on the left side of a web page and gives users vertical links to related pages in the same section.
A Side Navigation component provides users with vertical links on the left side of a page, allowing them to navigate to related sibling pages.
Side nav states: default, hover, active, and focus
Best practices
- Use on pages with many related sibling pages.
- Use descriptive, succinct page titles.
- Arrange items in the side navigation logically and based on relevance.
- Avoid using external links; only TxDOT.gov links are permitted.
- Do not place the SideNav component in locations other than the left column of a Column Control.
Placement
- The SideNav component dynamically draws from AEM. The content of the list cannot be changed on the page apart from "Check to hide sibling pages."
- Double check the content to ensure that all items are relavant to the page that the component is used on.
- Enable the "Check to hide sibling pages" option if children pages should not be displayed.
- Always display the SideNav component in the left column of a Column Control for visual consistency. Use layouts like 3-9 or 3-6-3 for visual consistency.
Accessibility guidelines
- Ensure the SideNav links are keyboard accessible.
- Provide clear and descriptive link text for screen readers.
- Maintain a logical tab order in the navigation.
Web Coordinator Checklist
- Select the appropriate Column Control layout (3-9 or 3-6-3).
- Place the SideNav component in the left column of a Column Control.
- Verify all included links are internal TxDOT.gov links.
- Reorder pages in AEM if a specific link order is needed, and republish.
- Enable "Check to hide sibling pages" if necessary.
- Test the navigation for keyboard accessibility and screen reader compatibility.