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

    • Using the <details> element on mobile

    In mobile view, the side navigation is collapsed by default and uses the native <details> and <summary> elements to provide expand and collapse behavior. In desktop view, this control is hidden with CSS because the side navigation remains visible and does not require a toggle. The <details> pattern provides a functional no-JavaScript fallback, while JavaScript enhances the experience by keeping expanded and collapsed state synchronized through appropriate ARIA attributes for assistive technologies.

    This implementation uses the following ARIA attributes:

    • aria-label="Toggle side navigation" on the <details> element to provide an accessible name for the mobile toggle control.
    • aria-expanded="false" on the <details> element to communicate whether the side navigation is currently collapsed or expanded. By default it is set to false since in mobile side navigation is in collapsed state.
    • aria-controls="side-nav-content" on the <details> element to associate the toggle with the navigation container it shows and hides.
    • aria-label="Side navigation" on the <nav> element to identify the landmark region for assistive technology users.
    • aria-current="page" on the active link, when used, to indicate the current page within the navigation.

    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.

    Level 1a:

    With landing page
    selected.

    Level 1b:

    With sublanding page selected.

    Level 2:

    With page under the sublanding page selected.

    Live example in new tab

    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

    • Full width H1 banner header side navigation mobile implementation

    If you have a full-width banner header in your layout, the side navigation can also go full width in mobile view. The page structure and layout column classes need to be adjusted accordingly.

    To make your side navigation work with a full-width banner header in mobile view, you need to use container-lg class for your main content page layout that will follow after h1 banner header. You also need to use col-12 class for your side navigation and main content columns. This will make your side navigation and main content full width on mobile devices.

    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