Skip to main content

In-page navigation

In-page navigation provides a way to quickly navigate to specific content on a single page.

Example

Best practices

In-page navigation is especially useful when there are numerous sections of content that don’t have a clear linear progression.

Do

  • Use on content-heavy pages that require a significant amount of scrolling to access the various sections.
  • Be concise on the navigation labels, ideally one or two words rather than a phrase.

Don’t

  • Don’t use on pages which don't scroll.
  • Don’t use to link to a new page, use the link navigation component instead.
  • Don’t use to link to hidden content. Consider using the pivot component instead.

Also known as

Anchor links
Drop-down links

Related

Hyperlink
Link navigation
Pivot
Select menu

Options

  • Default: The in-page navigation control is not sticky and scrolls vertically off the page.
  • Sticky: Set data-js-in-page-navigation=true on <nav> in order to dock the in-page navigation below the header and collapse it into a menu at smaller viewport widths.

Development

  • Schema definition: The in-page-navigation schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default

<nav class="c-in-page-navigation f-hide">
    <ul>
        <li>
            <a href="#anchor-1" class="">Navigation Link 1</a>
        </li>
        <li>
            <a href="#anchor-2" class="">Navigation Link 2</a>
        </li>
        <li>
            <a href="#anchor-3" class="">Navigation Link 3</a>
        </li>
    </ul>
</nav>
<nav class="c-in-page-navigation f-dropdown f-hide">
    <div class="f-dropdown-menu">
        <a href="#anchor-1" role="button" aria-haspopup="true" aria-expanded="false" class="f-dropdown-link">Navigation Link 1</a>
        <ul id="uniqueIdForList" role="menu" class="c-menu" aria-hidden="true">
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#anchor-1">Navigation Link 1</a>
            </li>
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#anchor-2">Navigation Link 2</a>
            </li>
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#anchor-3">Navigation Link 3</a>
            </li>
        </ul>
    </div>
</nav>

Preview

Vertical option

<nav class="c-in-page-navigation f-hide f-vertical">
    <ul>
        <li>
            <a href="#anchor-1" class="">Navigation Link 1</a>
        </li>
        <li>
            <a href="#anchor-2" class="">Navigation Link 2</a>
        </li>
        <li>
            <a href="#anchor-3" class="">Navigation Link 3</a>
        </li>
    </ul>
</nav>
<nav class="c-in-page-navigation f-dropdown f-hide f-vertical">
    <div class="f-dropdown-menu">
        <a href="#anchor-1" role="button" aria-haspopup="true" aria-expanded="false" class="f-dropdown-link">Navigation Link 1</a>
        <ul id="uniqueIdForList2" role="menu" class="c-menu" aria-hidden="true">
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#anchor-1">Navigation Link 1</a>
            </li>
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#anchor-2">Navigation Link 2</a>
            </li>
            <li class="c-menu-item" role="presentation">
                <a aria-checked="false" role="menuitem" href="#anchor-3">Navigation Link 3</a>
            </li>
        </ul>
    </div>
</nav>

Preview

Vertical with sticky option

<div data-js-in-page-navigation-wrapper="true">
    <nav class="c-in-page-navigation f-hide f-vertical">
        <ul>
            <li>
                <h4 class="c-heading-4">What's on the page</h4>
            </li>
            <li>
                <a href="#anchor-1" class="">Navigation Link 1</a>
            </li>
            <li>
                <a href="#anchor-2" class="">Navigation Link 2</a>
            </li>
            <li>
                <a href="#anchor-3" class="">Navigation Link 3</a>
            </li>
        </ul>
    </nav>
    <nav class="c-in-page-navigation f-dropdown f-hide f-vertical">
        <div class="f-dropdown-menu">
            <a href="#anchor-1" role="button" aria-haspopup="true" aria-expanded="false" class="f-dropdown-link">Navigation Link 1</a>
            <ul id="uniqueIdForList" role="menu" class="c-menu" aria-hidden="true">
                <li class="c-menu-item" role="presentation">
                    <a aria-checked="false" role="menuitem" href="#anchor-1">Navigation Link 1</a>
                </li>
                <li class="c-menu-item" role="presentation">
                    <a aria-checked="false" role="menuitem" href="#anchor-2">Navigation Link 2</a>
                </li>
                <li class="c-menu-item" role="presentation">
                    <a aria-checked="false" role="menuitem" href="#anchor-3">Navigation Link 3</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

Preview