Skip to main content

Main Content

Main Navigation

SCSS Source: core/src/scss/components/main-nav/_main-nav.scss

Twig Source: core/src/templates/components/main-nav/main-nav.twig

Description

Default Style

Example Markup

<nav class="su-main-nav no-js [ modifier_class ]" aria-label="main menu">
  <button class="su-main-nav__toggle " aria-expanded="false">Menu</button>
  <ul class="su-main-nav__menu-lv1">
    <li class=" ">
      <a href="/">Home</a>
    </li>
    <li class="su-main-nav__item--parent su-main-nav__item--current">
      <a href="#" aria-expanded="false">Useful Websites</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu">Stanford</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/sws">Stanford Web Services</a>
        </li>
        <li class="">
          <a href="https://ucomm.stanford.edu/">University Communications</a>
        </li>
        <li class="su-main-nav__item--current">
          <a href="/section-components.html">Decanter components</a>
        </li>
      </ul>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Tools & Documentation</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.figma.com/" target="_blank" rel="external">Figma</a>
        </li>
        <li class="">
          <a href="https://twig.symfony.com/doc/2.x/" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class=" ">
      <a href="https://stackoverflow.com/" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Other Useful Resources</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu/faculty-staff-gateway/">Faculty & Staff Gateway</a>
        </li>
        <li class="">
          <a href="https://www.stanford.edu/student-gateway/">Student Gateway</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Style Variants

.su-main-nav--light

Light colored theme

Example Markup

<nav class="su-main-nav no-js su-main-nav--light" aria-label="main menu">
  <button class="su-main-nav__toggle " aria-expanded="false">Menu</button>
  <ul class="su-main-nav__menu-lv1">
    <li class=" ">
      <a href="/">Home</a>
    </li>
    <li class="su-main-nav__item--parent su-main-nav__item--current">
      <a href="#" aria-expanded="false">Useful Websites</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu">Stanford</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/sws">Stanford Web Services</a>
        </li>
        <li class="">
          <a href="https://ucomm.stanford.edu/">University Communications</a>
        </li>
        <li class="su-main-nav__item--current">
          <a href="/section-components.html">Decanter components</a>
        </li>
      </ul>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Tools & Documentation</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.figma.com/" target="_blank" rel="external">Figma</a>
        </li>
        <li class="">
          <a href="https://twig.symfony.com/doc/2.x/" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class=" ">
      <a href="https://stackoverflow.com/" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Other Useful Resources</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu/faculty-staff-gateway/">Faculty & Staff Gateway</a>
        </li>
        <li class="">
          <a href="https://www.stanford.edu/student-gateway/">Student Gateway</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.su-main-nav--dark

Light on dark theme (for use on dark background colors). The dark background color in below example is just for demo. The actual background is transparent.

Example Markup

<nav class="su-main-nav no-js su-main-nav--dark" aria-label="main menu">
  <button class="su-main-nav__toggle " aria-expanded="false">Menu</button>
  <ul class="su-main-nav__menu-lv1">
    <li class=" ">
      <a href="/">Home</a>
    </li>
    <li class="su-main-nav__item--parent su-main-nav__item--current">
      <a href="#" aria-expanded="false">Useful Websites</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu">Stanford</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/sws">Stanford Web Services</a>
        </li>
        <li class="">
          <a href="https://ucomm.stanford.edu/">University Communications</a>
        </li>
        <li class="su-main-nav__item--current">
          <a href="/section-components.html">Decanter components</a>
        </li>
      </ul>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Tools & Documentation</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.figma.com/" target="_blank" rel="external">Figma</a>
        </li>
        <li class="">
          <a href="https://twig.symfony.com/doc/2.x/" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class=" ">
      <a href="https://stackoverflow.com/" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Other Useful Resources</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu/faculty-staff-gateway/">Faculty & Staff Gateway</a>
        </li>
        <li class="">
          <a href="https://www.stanford.edu/student-gateway/">Student Gateway</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.su-main-nav--mobile-search

Include search form inside the mobile nav

Example Markup

<nav class="su-main-nav no-js su-main-nav--mobile-search" aria-label="main menu">
  <button class="su-main-nav__toggle " aria-expanded="false">Menu</button>
  <ul class="su-main-nav__menu-lv1">
    <li class=" ">
      <a href="/">Home</a>
    </li>
    <li class="su-main-nav__item--parent su-main-nav__item--current">
      <a href="#" aria-expanded="false">Useful Websites</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu">Stanford</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/sws">Stanford Web Services</a>
        </li>
        <li class="">
          <a href="https://ucomm.stanford.edu/">University Communications</a>
        </li>
        <li class="su-main-nav__item--current">
          <a href="/section-components.html">Decanter components</a>
        </li>
      </ul>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Tools & Documentation</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.figma.com/" target="_blank" rel="external">Figma</a>
        </li>
        <li class="">
          <a href="https://twig.symfony.com/doc/2.x/" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class=" ">
      <a href="https://stackoverflow.com/" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Other Useful Resources</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu/faculty-staff-gateway/">Faculty & Staff Gateway</a>
        </li>
        <li class="">
          <a href="https://www.stanford.edu/student-gateway/">Student Gateway</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
  <div class="su-site-search " role="search">
    <form action="https://www.stanford.edu/search" method="get" accept-charset="UTF-8">
      <label class="su-site-search__sr-label" for="q">Search Stanford sites</label>
      <input type="text" id="q" name="q" class="su-site-search__input" placeholder="Search Stanford sites" maxlength="128" />
      <button type="submit" name="search" class="su-site-search__submit su-sr-only-text">Submit Search</button>
    </form>
  </div>
</nav>

.su-main-nav--center

Center both the desktop and mobile nav

Example Markup

<nav class="su-main-nav no-js su-main-nav--center" aria-label="main menu">
  <button class="su-main-nav__toggle " aria-expanded="false">Menu</button>
  <ul class="su-main-nav__menu-lv1">
    <li class=" ">
      <a href="/">Home</a>
    </li>
    <li class="su-main-nav__item--parent su-main-nav__item--current">
      <a href="#" aria-expanded="false">Useful Websites</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu">Stanford</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/sws">Stanford Web Services</a>
        </li>
        <li class="">
          <a href="https://ucomm.stanford.edu/">University Communications</a>
        </li>
        <li class="su-main-nav__item--current">
          <a href="/section-components.html">Decanter components</a>
        </li>
      </ul>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Tools & Documentation</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.figma.com/" target="_blank" rel="external">Figma</a>
        </li>
        <li class="">
          <a href="https://twig.symfony.com/doc/2.x/" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class=" ">
      <a href="https://stackoverflow.com/" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Other Useful Resources</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu/faculty-staff-gateway/">Faculty & Staff Gateway</a>
        </li>
        <li class="">
          <a href="https://www.stanford.edu/student-gateway/">Student Gateway</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.su-main-nav--right

Right justify both the desktop and mobile nav

Example Markup

<nav class="su-main-nav no-js su-main-nav--right" aria-label="main menu">
  <button class="su-main-nav__toggle " aria-expanded="false">Menu</button>
  <ul class="su-main-nav__menu-lv1">
    <li class=" ">
      <a href="/">Home</a>
    </li>
    <li class="su-main-nav__item--parent su-main-nav__item--current">
      <a href="#" aria-expanded="false">Useful Websites</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu">Stanford</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/sws">Stanford Web Services</a>
        </li>
        <li class="">
          <a href="https://ucomm.stanford.edu/">University Communications</a>
        </li>
        <li class="su-main-nav__item--current">
          <a href="/section-components.html">Decanter components</a>
        </li>
      </ul>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Tools & Documentation</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.figma.com/" target="_blank" rel="external">Figma</a>
        </li>
        <li class="">
          <a href="https://twig.symfony.com/doc/2.x/" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class=" ">
      <a href="https://stackoverflow.com/" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-main-nav__item--parent ">
      <a href="#" aria-expanded="false">Other Useful Resources</a>
      <ul class="su-main-nav__menu-lv2">
        <li class="">
          <a href="https://www.stanford.edu/faculty-staff-gateway/">Faculty & Staff Gateway</a>
        </li>
        <li class="">
          <a href="https://www.stanford.edu/student-gateway/">Student Gateway</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="">
          <a href="https://uit.stanford.edu/launchpad">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>