Side Navigation

Interior navigation helps people explore content within the same section of a website. Use this navigation in place of or in addition to dropdown menus.

When to use

Use with large, complex sites that have many pages and multiple levels of hierarchy.

Anatomy

1. Tier 2 Navigation/Menu Link (required)

2. Border (required)

3. Container (required)

4. Tier 3 Navigation Link

5. Tier 4 Navigation Link

Nested Menus

All Tier 2 menu items are always visible. However, the tier below a given section only displays when in that section and only the section immediate below it is visible. The display is highly contextual to the section a user is. The goal is to give them enough information to orient them to the complete set of options in a path/hierarchy without overloading them with too much peripheral information.

Examples

<nav class="ucla-side-navigation">
    <ul class="ucla-side-navigation__list">
        <li class="ucla-side-navigation__list-item">
            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
        </li>
        <li class="ucla-side-navigation__list-item">
            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
        </li>
        <li class="ucla-side-navigation__list-item">
            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
            <ul class="ucla-side-navigation__list">
                <li class="ucla-side-navigation__list-item">
                    <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
                </li>
                <li class="ucla-side-navigation__list-item">
                    <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
                    <ul class="ucla-side-navigation__list">
                        <li class="ucla-side-navigation__list-item ucla-side-navigation__list-item--current">
                            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
                        </li>
                        <li class="ucla-side-navigation__list-item">
                            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
                        </li>
                        <li class="ucla-side-navigation__list-item">
                            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
                        </li>
                    </ul>
                </li>
                <li class="ucla-side-navigation__list-item">
                    <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
                </li>
            </ul>
        </li>
        <li class="ucla-side-navigation__list-item">
            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
        </li>
    </ul>
</nav>

A side navigation is a vertical list of links that is on the left side of an interior page.

Note: Side navigation will only display on viewports larger 768px. On mobile, this navigation will be in the primary navigation triggered by the hamburger menu

To build, simply follow the this structure:

• .ucla-side-navigation - Main container
  • .ucla-side-navigation__list - Start of navigation list
    • .ucla-side-navigation__list-item - Single list item for the navigation
      • .ucla-side-navigation__link - Link to a page

<nav class="ucla-side-navigation">
    <ul class="ucla-side-navigation__list">
        <li class="ucla-side-navigation__list-item">
            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
        </li>
        <!-- ... -->
    </ul>
</nav>

Nested Lists

For the 3+ Tiers, you can nest a .ucla-side-navigation__list inside the .ucla-side-navigation__list-item:

<!-- ... -->
<li class="ucla-side-navigation__list-item">
    <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
    <ul class="ucla-side-navigation__list">
        <li class="ucla-side-navigation__list-item">
            <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
        </li>
    </ul>
</li>
<!-- ... -->

Current Item

To display the current list item, simply add the .ucla-side-navigation__list-item--current to a list item:

<li class="ucla-side-navigation__list-item ucla-side-navigation__list-item--current">
    <a href="#" class="ucla-side-navigation__link">Side navigation link</a>
</li>