Skip to main content

Main Content

Secondary Navigation

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">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">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">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">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">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">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">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">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">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">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>