Navigation

The UCLA header navigation is a robust component offering standardized navigation, search, and accessibility.

When to use

Informational sites with a fair amount of subpages can benefit from structured navigation and it is strongly recommended for large or complex sites with deep hierarchies.

For screen sizes 1040px and greater wide, use the full navigation.

At screen sizes under 1040 wide, the menu reduces to a “hamburger” menu button on the right. When tapped, the menu tray takes up the full width of the screen and scrolls vertically if needed.

Anatomy

Desktop

1. Tier 1 Navigation/Menu Link (required)

Try to limit menu to 7 list items or less
Keep menu names short to avoid taking up too much horizontal space or having to wrap to 2 lines
Click goes to menu landing page, hover opens dropdown if applicable
Add down arrow only if there is a dropdown menu

2. Secondary Navigation

Try to limit Secondary Navigation to 5 items and a Call-to-action. This is often used to feature links for secondary audiences.

3. Call to action

4. Dropdown Menu

A dropdown menu is comprised of 2nd tier sub-navigation pages. 3rd-tier and 4th-tier are avaiable on mobile but go into the Side Navigation on desktop (see specs)

5. Search

Click opens search overlay (see Search specs)

Mobile

1. Navigation Menu (or Hamburger Menu)

opens main navigation slide-out menu and toggles to a close icon

2. Search

Tapping anywhere on the search bar would activiate keyboard/text entry input (See Search specs)

3. Tier 1 Navigation/Menu Link (required)

Try to limit menu to 7 choices or less
Keep menu names short to avoid having to wrap to 2 lines
Click goes to menu landing page

4. Tier 1 Dropdown Item

Add arrow only if there is a dropdown menu
Square arrow button link opens menu below
Down arrow by default toggles to an up arrow upon opening

5. Tier 2 Navigation Item

Similar to 3 but note indent and shading

6. Tier 2 Dropdown Item

Similar to 4 but note indent and shading

7. Tier 3 Navigation Item

Similar to 3 but note indent and shading

8. Tier 3 Dropdown Item

Similar to 4 but note shading

9. Tier 4 Navigation Item

Similar to 3 but note indent and shading

10. Secondary Navigation Link

Try to limit Secondary Links to 5 and a call-to-action. This is often used to feature links for secondary audiences.

11. Call to action

Examples

<div class="ucla-header__container" id="header-wrap">

  <nav id="nav-second" class="ucla-secondary-nav" aria-label="Secondary Menu">
    <ul class="ucla-secondary-nav__list">
      <li class="ucla-secondary-nav__item">
        <a class="ucla-secondary-nav__link" href="#">Nav Item</a>
      </li>
      <li class="ucla-secondary-nav__item">
        <a class="ucla-secondary-nav__link" href="#">Nav Item</a>
      </li>
      <li class="ucla-secondary-nav__item">
        <a class="ucla-secondary-nav__link ucla-secondary-nav__link--active" href="#">Nav Item</a>
      </li>
    </ul>
  </nav>  <button id="primary-ham" class="hamburger" type="button" aria-controls="nav-main" aria-expanded="false" alt="navigation and search">
    <span class="hamburger__box">
      <span class="hamburger__inner"></span>
    </span>
  </button>  <nav id="nav-main" class="ucla-main-nav" aria-label="Main Menu">
    <ul class="ucla-main-nav__list">
      <li
        class="ucla-main-nav__item ucla-main-nav__item--has-children"
        aria-haspopup="true"
      >
        <a
          class="ucla-main-nav__link ucla-main-nav__link--current-page"
          href="#"
        >Parent Item</a>
        <button
          class="ucla-main-nav__toggle"
          aria-expanded="false"
          aria-label="toggle"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xml:space="preserve"
            viewBox="12 17.2 24 14.8"
          ><title>Arrow Down</title><path
              class="down-arrow--blue"
              d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"
            ></path></svg>
        </button>
        <ul class="ucla-main-nav__sublist">
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
          <li class="ucla-main-nav__item">
            <a
              class="ucla-main-nav__link ucla-main-nav__link--current-page"
              href="#"
            >Nav Item</a>
          </li>
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
        </ul>
      </li>
      <li class="ucla-main-nav__item" aria-haspopup="true">
        <a class="ucla-main-nav__link" href="#">Nav Item</a>
      </li>
      <li
        class="ucla-main-nav__item ucla-main-nav__item--has-children"
        aria-haspopup="true"
      >
        <a class="ucla-main-nav__link" href="#">Parent Item</a>
        <button
          class="ucla-main-nav__toggle"
          aria-expanded="false"
          aria-label="toggle"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xml:space="preserve"
            viewBox="12 17.2 24 14.8"
          ><title>Arrow Down</title><path
              class="down-arrow--blue"
              d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"
            ></path></svg>
        </button>
        <ul class="ucla-main-nav__sublist">
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
          <li class="ucla-main-nav__item ucla-nav_sublist--has-children">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
            <button
              class="ucla-main-nav__toggle"
              aria-expanded="false"
              aria-label="toggle"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                xml:space="preserve"
                viewBox="12 17.2 24 14.8"
              ><title>Arrow Down</title><path
                  class="down-arrow--blue"
                  d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"
                ></path></svg>
            </button>
            <ul class="ucla-main-nav__sublist" id="third-level">
              <li class="ucla-main-nav__item">
                <a class="ucla-main-nav__link" href="#">Nav Item</a>
              </li>
              <li class="ucla-main-nav__item ucla-nav_sublist--has-children">
                <a class="ucla-main-nav__link" href="#">Nav Item</a>
                <button
                  class="ucla-main-nav__toggle"
                  aria-expanded="false"
                  aria-label="toggle"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xml:space="preserve"
                    viewBox="12 17.2 24 14.8"
                  ><title>Arrow Down</title><path
                      class="down-arrow--blue"
                      d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"
                    ></path></svg>
                </button>
                <ul class="ucla-main-nav__sublist" id="forth-level">
                  <li class="ucla-main-nav__item">
                    <a class="ucla-main-nav__link" href="#">Nav Item</a>
                  </li>
                  <li class="ucla-main-nav__item">
                    <a class="ucla-main-nav__link" href="#">Nav Item</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li
        class="ucla-main-nav__item ucla-main-nav__item--has-children"
        aria-haspopup="true"
      >
        <a class="ucla-main-nav__link" href="#">Parent Item</a>
        <button
          class="ucla-main-nav__toggle"
          aria-expanded="false"
          aria-label="toggle"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xml:space="preserve"
            viewBox="12 17.2 24 14.8"
          ><title>Arrow Down</title><path
              class="down-arrow--blue"
              d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"
            ></path></svg>
        </button>
        <ul class="ucla-main-nav__sublist">
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
        </ul>
      </li>
      <li
        class="ucla-main-nav__item ucla-main-nav__item--has-children"
        aria-haspopup="true"
      >
        <a class="ucla-main-nav__link" href="#">Parent Item</a>
        <button
          class="ucla-main-nav__toggle"
          aria-expanded="false"
          aria-label="toggle"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xml:space="preserve"
            viewBox="12 17.2 24 14.8"
          ><title>Arrow Down</title><path
              class="down-arrow--blue"
              d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"
            ></path></svg>
        </button>
        <ul class="ucla-main-nav__sublist">
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
        </ul>
      </li>
      <li
        class="ucla-main-nav__item ucla-main-nav__item--has-children"
        aria-haspopup="true"
      >
        <a class="ucla-main-nav__link" href="#">Parent Item</a>
        <button
          class="ucla-main-nav__toggle"
          aria-expanded="false"
          aria-label="toggle"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xml:space="preserve"
            viewBox="12 17.2 24 14.8"
          ><title>Arrow Down</title><path
              class="down-arrow--blue"
              d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"
            ></path></svg>
        </button>
        <ul class="ucla-main-nav__sublist">
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
          <li class="ucla-main-nav__item">
            <a class="ucla-main-nav__link" href="#">Nav Item</a>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="ucla-secondary-nav__list">
      <li class="ucla-secondary-nav__item">
        <a class="ucla-secondary-nav__link" href="#">Nav Item</a>
      </li>
      <li class="ucla-secondary-nav__item">
        <a class="ucla-secondary-nav__link" href="#">Nav Item</a>
      </li>
      <li class="ucla-secondary-nav__item">
        <a
          class="ucla-secondary-nav__link ucla-secondary-nav__link--active"
          href="#"
        >Nav Item</a>
      </li>
    </ul>
    <div class="ucla-main-nav__search-desktop" id="primary-nav-search">
      <button id="search-button" class="ucla-main-nav__search-desktop-button">
        <svg
          role="img"
          aria-label="Search Icon"
          class="ucla-main-nav__search-icon"
          width="18px"
          height="18px"
          viewBox="0 0 18 18"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <title>Search Icon</title>
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(-15.000000, -15.000000)">
              <g id="Nav-Item">
                <g transform="translate(12.000000, 12.000000)">
                  <polygon
                    class="Path-polygon"
                    points="0 0 24 0 24 24 0 24"
                  ></polygon>
                  <path
                    d="M15.5,14 L14.71,14 L14.43,13.73 C15.41,12.59 16,11.11 16,9.5 C16,5.91 13.09,3 9.5,3 C5.91,3 3,5.91 3,9.5 C3,13.09 5.91,16 9.5,16 C11.11,16 12.59,15.41 13.73,14.43 L14,14.71 L14,15.5 L19,20.49 L20.49,19 L15.5,14 Z M9.5,14 C7.01,14 5,11.99 5,9.5 C5,7.01 7.01,5 9.5,5 C11.99,5 14,7.01 14,9.5 C14,11.99 11.99,14 9.5,14 Z"
                    fill="#00598C"
                    fill-rule="evenodd"
                  ></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
        <svg
          class="ucla-main-nav__search-close"
          xmlns="http://www.w3.org/2000/svg"
          width="18px"
          height="18px"
          xml:space="preserve"
          viewBox="10 10 28 28"
        ><title>Close</title><path
            d="M38 12.8 35.2 10 24 21.2 12.8 10 10 12.8 21.2 24 10 35.2l2.8 2.8L24 26.8 35.2 38l2.8-2.8L26.8 24 38 12.8z"
            fill="#ffffff"
            fill-rule="evenodd"
          ></path></svg>
      </button>
      <div
        class="ucla-main-nav__search-block-form"
        id="block-search"
        role="search"
      >
        <form
          role="search"
          method="get"
          class="ucla-main-nav__search-form"
          action="#"
          id="menu-search-desktop"
        >
          <label>
            <span class="ucla-main-nav__screen-reader-text visuallyhidden">Search
              for:</span>
            <input
              type="search"
              class="ucla-main-nav__search-field"
              placeholder="Search …"
              value=""
              name="s"
            />
          </label>
          <input
            type="submit"
            class="ucla-main-nav__search-submit"
            value="Search"
          />
        </form>
      </div>
    </div>
  </nav>
</div>

Best Practices

Navigation in general should have less than 10 items and can include a search button.

The navigation component can support up to 4-tier navigation, however desktop will only display up to 2-tier.

To start off, you must first add the mobile navigation button.

Note: The mobile navigation button will only be visible on viewports smaller than 768px. The example below is for demonstration purposes only.

<button id="primary-ham" class="hamburger" type="button" aria-controls="nav-main" aria-expanded="false" alt="navigation and search">
    <span class="hamburger__box">
        <span class="hamburger__inner"></span>
    </span>
</button>

The #primary-ham ID is required since it is being targeted by JavaScript’s eventListener.

The primary navigation starts off with the .ucla-main-nav class container with a #nav-main ID.

<nav id="nav-main" class="ucla-main-nav" aria-label="Main Menu"></nav>

The navigation will be inside this container in the following structure:

.ucla-main-nav__list - <ul>
- .ucla-main-nav__item - <li> add the class .ucla-main-nav__item--has-children if item has sublist
  - .ucla-main-nav__link - <a> add the class .ucla-main-nav__link--current-page if link is the current page

It should look like this:

<nav id="nav-main" class="ucla-main-nav" aria-label="Main Menu">
  <ul class="ucla-main-nav__list">
    <li class="ucla-main-nav__item">
      <a class="ucla-main-nav__link" href="#">Nav Item</a>
    </li>
    <!-- ... -->
  </ul>
</nav>

Sub navigation

If your primary navigation has dropdowns, you will need to structure your .ucla-main-nav__item to the following:

.ucla-main-nav__item--has-children - Add this class to the li.ucla-main-nav__item
- .ucla-main-nav__link - <a> add the class .ucla-main-nav__link--current-page if link is the current page
- .ucla-main-nav__toggle - <button> to toggle sublist visibility
- .ucla-main-nav__sublist - <ul> for the sublist dropdown
  - .ucla-main-nav__item.ucla-nav_sublist--has-children - <li> item if you have more than 2 tiers of navigation.

<!-- ... -->
<li class="ucla-main-nav__item ucla-main-nav__item--has-children" aria-haspopup="true">
    <a class="ucla-main-nav__link" href="#">Parent Item</a>
    <button class="ucla-main-nav__toggle" aria-expanded="false" aria-label="toggle">
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="12 17.2 24 14.8">
            <title>Arrow Down</title>
            <path class="down-arrow--blue" d="m14.8 17.2 9.2 9.2 9.2-9.2L36 20 24 32 12 20l2.8-2.8z"></path>
        </svg>
    </button>
    <ul class="ucla-main-nav__sublist">
      <li class="ucla-main-nav__item">
          <a class="ucla-main-nav__link" href="#">Nav Item</a>
      </li>
      <!-- ... -->
    </ul>
</li>
<!-- ... -->