Skip to main content

Side nav

Information: Documentation incomplete

This component still requires documentation.

Use the side navigation component to provide access to lower levels of the websites web pages.

Examples

Default

Open example in a new window
View HTML 
<nav class="uhb-c-side-nav">
  <button class="uhb-c-side-nav__toggle" type="button" aria-controls="side-nav" aria-expanded="false" aria-label="Page title (current page)">
    Page title
  </button>
  <div class="uhb-c-side-nav__container" id="side-nav">
    <ul class="uhb-c-side-nav__list">
      <li class="uhb-c-side-nav__item">
        <a class="uhb-c-side-nav__link" href="#">
          <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                <path d="M8.45 22l-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10z"></path>
              </svg>
          Grandfather page
        </a>
        <ul class="uhb-c-side-nav__list">
          <li class="uhb-c-side-nav__item">
            <a class="uhb-c-side-nav__link" href="#">
              <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                <path d="M8.45 22l-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10z"></path>
              </svg>
              Parent page
            </a>
            <ul class="uhb-c-side-nav__list is-current">
              <li class="uhb-c-side-nav__item">
                <a class="uhb-c-side-nav__link" href="#">
                  <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                    <path d="M8.45 22l-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10z"></path>
                  </svg>
                  Sibling page
                </a>
              </li>
              <li class="uhb-c-side-nav__item is-current">
                <a class="uhb-c-side-nav__link" href="#">
                  <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                    <path d="M8.45 22l-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10z"></path>
                  </svg>
                  Current page
                </a>
                <ul class="uhb-c-side-nav__list">
                  <li class="uhb-c-side-nav__item">
                    <a class="uhb-c-side-nav__link" href="#">
                      <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                        <path d="M8.45 22l-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10z"></path>
                      </svg>
                      Child page
                    </a>
                  </li>
                  <li class="uhb-c-side-nav__item">
                    <a class="uhb-c-side-nav__link" href="#">
                      <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                        <path d="M8.45 22l-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10z"></path>
                      </svg>
                      Child page
                    </a>
                  </li>
                  <li class="uhb-c-side-nav__item">
                    <a class="uhb-c-side-nav__link" href="#">
                      <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                        <path d="M8.45 22l-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10z"></path>
                      </svg>
                      Child page
                    </a>
                  </li>
                </ul>
              </li>
              <li class="uhb-c-side-nav__item">
                <a class="uhb-c-side-nav__link" href="#">
                  <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                    <path d="M8.45 22l-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10z"></path>
                  </svg>
                  Sibling page
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>