Skip to main content

Supplemental navigation

Supplemental navigation is secondary navigation that allows for many top-level navigation items while conserving screen real estate. It is a list of links that direct the user to other pages or to a section within a single scrollable page of a website. When the user selects an item in the supplemental navigation, it automatically expands the menu item to show submenu items, if present. It is responsive in that it will collapse into a select menu component at the top of the page if the viewport width falls below a minimum.

Example

Best practices

Supplemental navigation works well for web properties with many top-level navigation items that are in the same category, such as a sports site with categories like Football, Baseball, Basketball, Soccer, and so on. However, it is not mandatory that they belong to the same category. It also works well to provide a consistent navigational experience across web pages within a given site.

Do

  • We recommend using 5-10 or more top-level navigational categories.
  • Use supplemental navigation to preserve screen real estate in the smaller viewports when collapsed.
  • Use it for persistent navigational links in the larger viewports when expanded.

Don’t

  • If each link takes the user to another page, don’t link to a section within the page; only link to the top of the page. Alternatively, the entire set of links could navigate to the start of different major sections on the current page.

Also known as

Left nav
Nav pane
Table of contents
Vertical pivots

Related

Button: light
Link navigation
Select menu

Development

Code and preview

Default

<!-- data-state to be replaced by either aria-expanded or collapsed as of v2.0.0. -->
<div class="m-supplemental-nav">
    <nav>
        <nav>
            <button aria-controls="navTargetItem1" data-state="collapsed">Item 1: Phasellus vestibulum</button>
            <nav id="navTargetItem1">
                <a href="#">Item 1 Nested Item 1: Phasellus vestibulum</a>
                <a href="#">Item 1 Nested Item 2: Phasellus vestibulum</a>
                <a href="#">Item 1 Nested Item 3: Phasellus vestibulum</a>
                <a href="#">Item 1 Nested Item 4: Phasellus vestibulum</a>
            </nav>
        </nav>
        <nav>
            <button aria-controls="navTargetItem2" data-state="collapsed">Item 2: Phasellus vestibulum</button>
            <nav id="navTargetItem2">
                <a href="#">Item 2 Nested Item 1: Phasellus vestibulum</a>
                <a href="#">Item 2 Nested Item 2: Phasellus vestibulum</a>
            </nav>
        </nav>
        <nav>
            <button aria-controls="navTargetItem3" data-state="expanded">Item 3: Phasellus vestibulum</button>
            <nav id="navTargetItem3">
                <a href="#">Item 3 Nested Item 1: Phasellus vestibulum</a>
                <a href="#" class="f-active">Item 3 Nested Item 2: Phasellus vestibulum</a>
            </nav>
        </nav>
        <nav>
            <a href="#" data-state="">Item 4: Phasellus vestibulum</a>
            <nav id=""></nav>
        </nav>
    </nav>
</div>