Skip to main content

Main Content

Secondary Navigation

SCSS Source: core/src/scss/components/secondary-nav/_secondary-nav.scss

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

Description

The secondary site navigation that is...

Default Style

Example Markup

<nav class="su-secondary-nav no-js [ modifier_class ]" aria-label="secondary menu">
  <ul class="su-secondary-nav__menu-lv1 su-secondary-nav__menu">
    <li class="su-secondary-nav__item">
      <a href="/" class="su-secondary-nav__link">Home</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Current - First level item</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Second level item</a>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #2</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item su-secondary-nav__item--parent">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
              <ul class="su-secondary-nav__menu-lv4 su-secondary-nav__menu">
                <li class="su-secondary-nav__item su-secondary-nav__item--parent">
                  <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Fourth level item</a>
                  <ul class="su-secondary-nav__menu-lv5 su-secondary-nav__menu">
                    <li class="su-secondary-nav__item">
                      <a href="/item-components-secondary-navigation.html" class="su-secondary-nav__link" target="_blank">Fifth level item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="su-secondary-nav__item">
              <a href="/section-components.html" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #3</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link">University Communications</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Tools & Documentation</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.figma.com/" class="su-secondary-nav__link" target="_blank" rel="external">Figma</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://twig.symfony.com/doc/2.x/" class="su-secondary-nav__link" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item">
      <a href="https://stackoverflow.com/" class="su-secondary-nav__link" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Other Useful Resources</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/faculty-staff-gateway/" class="su-secondary-nav__link">Faculty & Staff Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/student-gateway/" class="su-secondary-nav__link">Student Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Style Variants

.su-secondary-nav--accordion

An accordion button light theme option.

Example Markup

<nav class="su-secondary-nav no-js su-secondary-nav--accordion" aria-label="secondary menu">
  <ul class="su-secondary-nav__menu-lv1 su-secondary-nav__menu">
    <li class="su-secondary-nav__item">
      <a href="/" class="su-secondary-nav__link">Home</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Current - First level item</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Second level item</a>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #2</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item su-secondary-nav__item--parent">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
              <ul class="su-secondary-nav__menu-lv4 su-secondary-nav__menu">
                <li class="su-secondary-nav__item su-secondary-nav__item--parent">
                  <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Fourth level item</a>
                  <ul class="su-secondary-nav__menu-lv5 su-secondary-nav__menu">
                    <li class="su-secondary-nav__item">
                      <a href="/item-components-secondary-navigation.html" class="su-secondary-nav__link" target="_blank">Fifth level item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="su-secondary-nav__item">
              <a href="/section-components.html" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #3</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link">University Communications</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Tools & Documentation</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.figma.com/" class="su-secondary-nav__link" target="_blank" rel="external">Figma</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://twig.symfony.com/doc/2.x/" class="su-secondary-nav__link" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item">
      <a href="https://stackoverflow.com/" class="su-secondary-nav__link" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Other Useful Resources</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/faculty-staff-gateway/" class="su-secondary-nav__link">Faculty & Staff Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/student-gateway/" class="su-secondary-nav__link">Student Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.su-secondary-nav--accordion-dark

An accordion button dark theme option.

Example Markup

<nav class="su-secondary-nav no-js su-secondary-nav--accordion-dark" aria-label="secondary menu">
  <ul class="su-secondary-nav__menu-lv1 su-secondary-nav__menu">
    <li class="su-secondary-nav__item">
      <a href="/" class="su-secondary-nav__link">Home</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Current - First level item</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Second level item</a>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #2</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item su-secondary-nav__item--parent">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
              <ul class="su-secondary-nav__menu-lv4 su-secondary-nav__menu">
                <li class="su-secondary-nav__item su-secondary-nav__item--parent">
                  <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Fourth level item</a>
                  <ul class="su-secondary-nav__menu-lv5 su-secondary-nav__menu">
                    <li class="su-secondary-nav__item">
                      <a href="/item-components-secondary-navigation.html" class="su-secondary-nav__link" target="_blank">Fifth level item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="su-secondary-nav__item">
              <a href="/section-components.html" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #3</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link">University Communications</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Tools & Documentation</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.figma.com/" class="su-secondary-nav__link" target="_blank" rel="external">Figma</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://twig.symfony.com/doc/2.x/" class="su-secondary-nav__link" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item">
      <a href="https://stackoverflow.com/" class="su-secondary-nav__link" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Other Useful Resources</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/faculty-staff-gateway/" class="su-secondary-nav__link">Faculty & Staff Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/student-gateway/" class="su-secondary-nav__link">Student Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.su-secondary-nav--buttons

Button toggles instead of accordion links.

Example Markup

<nav class="su-secondary-nav no-js su-secondary-nav--buttons" aria-label="secondary menu">
  <ul class="su-secondary-nav__menu-lv1 su-secondary-nav__menu">
    <li class="su-secondary-nav__item">
      <a href="/" class="su-secondary-nav__link">Home</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Current - First level item</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Second level item</a>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #2</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item su-secondary-nav__item--parent">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
              <ul class="su-secondary-nav__menu-lv4 su-secondary-nav__menu">
                <li class="su-secondary-nav__item su-secondary-nav__item--parent">
                  <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Fourth level item</a>
                  <ul class="su-secondary-nav__menu-lv5 su-secondary-nav__menu">
                    <li class="su-secondary-nav__item">
                      <a href="/item-components-secondary-navigation.html" class="su-secondary-nav__link" target="_blank">Fifth level item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="su-secondary-nav__item">
              <a href="/section-components.html" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #3</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link">University Communications</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Tools & Documentation</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.figma.com/" class="su-secondary-nav__link" target="_blank" rel="external">Figma</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://twig.symfony.com/doc/2.x/" class="su-secondary-nav__link" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item">
      <a href="https://stackoverflow.com/" class="su-secondary-nav__link" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Other Useful Resources</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/faculty-staff-gateway/" class="su-secondary-nav__link">Faculty & Staff Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/student-gateway/" class="su-secondary-nav__link">Student Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.su-secondary-nav--buttons-dark

Button toggles instead of accordion link, light edition.

Example Markup

<nav class="su-secondary-nav no-js su-secondary-nav--buttons-dark" aria-label="secondary menu">
  <ul class="su-secondary-nav__menu-lv1 su-secondary-nav__menu">
    <li class="su-secondary-nav__item">
      <a href="/" class="su-secondary-nav__link">Home</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Current - First level item</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Second level item</a>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #2</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item su-secondary-nav__item--parent">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
              <ul class="su-secondary-nav__menu-lv4 su-secondary-nav__menu">
                <li class="su-secondary-nav__item su-secondary-nav__item--parent">
                  <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Fourth level item</a>
                  <ul class="su-secondary-nav__menu-lv5 su-secondary-nav__menu">
                    <li class="su-secondary-nav__item">
                      <a href="/item-components-secondary-navigation.html" class="su-secondary-nav__link" target="_blank">Fifth level item</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="su-secondary-nav__item">
              <a href="/section-components.html" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item su-secondary-nav__item--parent">
          <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank" rel="external">Second item #3</a>
          <ul class="su-secondary-nav__menu-lv3 su-secondary-nav__menu">
            <li class="su-secondary-nav__item">
              <a href="https://www.stanford.edu" class="su-secondary-nav__link" target="_blank">Third level item</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://uit.stanford.edu/sws" class="su-secondary-nav__link" target="_blank">Current - Third level item #2</a>
            </li>
            <li class="su-secondary-nav__item">
              <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link" target="_blank">Third level item #3</a>
            </li>
          </ul>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://ucomm.stanford.edu/" class="su-secondary-nav__link">University Communications</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Tools & Documentation</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.figma.com/" class="su-secondary-nav__link" target="_blank" rel="external">Figma</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://twig.symfony.com/doc/2.x/" class="su-secondary-nav__link" target="_blank" rel="external">Twig</a>
        </li>
      </ul>
    </li>
    <li class="su-secondary-nav__item">
      <a href="https://stackoverflow.com/" class="su-secondary-nav__link" target="_blank" rel="external">Developer Help</a>
    </li>
    <li class="su-secondary-nav__item su-secondary-nav__item--parent">
      <a href="#" class="su-secondary-nav__link">Other Useful Resources</a>
      <ul class="su-secondary-nav__menu-lv2 su-secondary-nav__menu">
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/faculty-staff-gateway/" class="su-secondary-nav__link">Faculty & Staff Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://www.stanford.edu/student-gateway/" class="su-secondary-nav__link">Student Gateway</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">What Happens If My Second Level Link Text is Really Really Long</a>
        </li>
        <li class="su-secondary-nav__item">
          <a href="https://uit.stanford.edu/launchpad" class="su-secondary-nav__link">Tools Launchpad</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>