Side navigation

Other names: Left navigation, side menu

The side navigation menu allows visitors to find related pages within a topic. It provides a deeper level of navigation for larger websites. Selecting a side menu item will take the visitor to that page.

Single-level list

Add class landing to your landing page link to indicate the landing page. Use active class on your link to indicate the current page if the page is currently open. 

  • Landing page

    • Multi-level list

    You can review a working example of this on our website. The Get started section goes 3 levels deep.

    1. Go to Get started .
    2. From the side navigation, select CSS classes shortcuts.
    3. Then select Utility CSS classes.

    For an example that has 6 levels, review our live example.

    In Level 2 example in addition to landing class add class back to your sublanding page link to add back arrow icon. Don't use back class if the page is current. 

  • Page 4 section landing

    • Accordion list

    To add accordion functionality to your side navigation use cagov-accordion tag with class sidenav . If you want your accordion to be open on default use attribute open in your details tag. You can also use class active in your summary tag to indicate current page.

    Scroll bar

    This built-in feature only activates when side navigation is longer than the current viewport area.

    Usage

    When and how to use it

    The side navigation component can help visitors navigate through lots of content. It complements site navigation (doesn’t replace it).

    Use this component when:

    • Visitors need to navigate between multiple pages within a website
    • Top level navigation isn’t enough to support your site hierarchy

    Use single level when navigation is simple and direct.

    Use multi-level when there are a lot of pages and/or hierarchical.

    How not to use it

    When possible, avoid complex and deep navigation menus.

    Do not go more than 2 levels deep. This makes the interaction simple for our visitors.

    Do not link to pages outside of the parent website. You can do that within content.

    Multi-level behavior

    1. A multi-level side menu will start with a single level list of parent pages.
    1. When you select a parent page with children, the same menu displays. It also displays links to the children pages, which are indented under that item. This displays two levels of navigation.
    1. If a child page has subpages (grandchildren):
      1. The parent menu is gone
      2. The children items remain
      3. The grandchildren are added in
      4. A “back to” the parent menu link is added to the top of the menu

    This logic can go as deep as needed, following this pattern.

    Accessibility

    Standard accessibility review

    Each time a new component version is published:

    • Test with the axe accessibility tool
    • Review with the VoiceOver or NVDA screen reader
    • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
    • Check the component layout on a variety of screen sizes