This site is no longer maintained

This is the documentation for version 0 of the design system and will no longer be updated. Please see the new Design System site on nice.org.uk for the most up-to-date documentation.

Design System documentation

Alpha NICE Design System is in development. This means it is not feature complete and there may be issues. Find any? Please, let us know!

Stacked navigation

Navigation to support sub-pages within a section

Why?

When you need to sign post a user to child pages within a section.

Usage

  • Use in combination with breadcrumbs
  • to display a secondary navigational hierarchy
  • when you need our users to navigate through subpages or content chapters
  • always position to the far left of the interface to maintain consistency
  • try to keep navigational links short
  • always use an active link to display what page the user is on
  • display one level at a time.
  • use aria-current="page" to highlight the current page
  • use aria-label="navigation name" or aria-labelledby="id-here" on the root nav element
  • stacked nav expands to fill the available space, so usually wrap in a grid.

Variants

Root page current

When the navigation root is the current page:

Example

Source


<div class="grid" data-no-inpagenav>
    <div data-g="12 sm:4">
        <nav class="stacked-nav">
            <h2 class="stacked-nav__root">
                <a href="#" aria-current="page">
                    Root link
                </a>
            </h2>

            <ul class="stacked-nav__list">
                <li class="stacked-nav__list-item">
                    <a href="#">
                        Link 1
                    </a>
                </li>
                <li class="stacked-nav__list-item">
                    <a href="#">
                        Link 2
                    </a>
                </li>
                <li class="stacked-nav__list-item">
                    <a href="#">
                        Link 3
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

Sub page current

When a sub page is the current page:

Example

Source


<div class="grid" data-no-inpagenav>
    <div data-g="12 sm:4">
        <nav class="stacked-nav">
            <h2 class="stacked-nav__root">
                <a href="#">
                    Root link
                </a>
            </h2>

            <ul class="stacked-nav__list">
                <li class="stacked-nav__list-item">
                    <a href="#">
                        Link 1
                    </a>
                </li>
                <li class="stacked-nav__list-item">
                    <a href="#" aria-current="page">
                        Link 2
                    </a>
                </li>
                <li class="stacked-nav__list-item">
                    <a href="#">
                        Link 3
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

Edit on GitHub