Sidebar Navigation

JSThis component requires JavaScript.

Sidebar Navigation compliments a Menu by displaying “sub-content” vertically on the left side of a webpage.

It is strongly recommended that a website has a Menu in place.

Consider ways to simplify the navigation. Use Sidebar Navigation only if necessary.

In addition to the default Menu, consider a sidebar menu if there is a large amount of content and/or if lower-level sections are closely related and users will need to quickly jump between them.

Sidebar navigation may contain Accordions that collapse and reveal nested links. When paired with the Menu, the Menu displays “Level 1” links, while the Sidebar Navigation displays “Level 2” links and deeper. These may be referred to as “child pages”.

When using sidebar navigation the width should be set to bux-grid__cell--3.

Example

Level 1

<div class="bux-container bux-container--sidebar-nav" expand-active-submenu="1">
  <button
    id="sidebar-nav-toggle"
    type="button"
    class="bux-sidebar-nav__toggle"
    aria-controls="sidebar-nav-panel"
    aria-expanded="false"
  >
    <span class="bux-sidebar-nav__toggle-label">View related pages</span>
  </button>
  <div id="sidebar-nav-panel" class="bux-sidebar-nav__panel">
    <h2 class="bux-sidebar-nav__title">Level 1</h2>
    <nav
      id="sidebar-nav"
      aria-label="Sidebar"
      class="disclosure-nav disclosure-nav-orientation-vertical"
    >
      <ul class="bux-sidebar-nav">
        <li class="bux-sidebar-nav__item">
          <a
            data-button-aria-label=""
            class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
            href="#"
            rel="noopener"
          >
            Level 1 Link
          </a>

          <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link bux-sidebar-nav__link--active disclosure-nav-item-with-submenu"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>

              <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                <li class="bux-sidebar-nav__item">
                  <a
                    data-button-aria-label=""
                    class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
                    href="#"
                    rel="noopener"
                  >
                    Level 3 Link
                  </a>

                  <ul
                    class="disclosure-nav-submenu disclosure-nav-submenu-closed"
                  >
                    <li class="bux-sidebar-nav__item">
                      <a
                        data-button-aria-label=""
                        class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
                        href="#"
                        rel="noopener"
                      >
                        Level 4 Link
                      </a>

                      <ul
                        class="disclosure-nav-submenu disclosure-nav-submenu-closed"
                      >
                        <li class="bux-sidebar-nav__item">
                          <a
                            data-button-aria-label=""
                            class="bux-sidebar-nav__link"
                            href="#"
                            rel="noopener"
                          >
                            Level 5 Link
                          </a>
                        </li>
                        <li class="bux-sidebar-nav__item">
                          <a
                            data-button-aria-label=""
                            class="bux-sidebar-nav__link"
                            href="#"
                            rel="noopener"
                          >
                            Level 5 Link
                          </a>
                        </li>
                        <li class="bux-sidebar-nav__item">
                          <a
                            data-button-aria-label=""
                            class="bux-sidebar-nav__link"
                            href="#"
                            rel="noopener"
                          >
                            Level 5 Link
                          </a>
                        </li>
                        <li class="bux-sidebar-nav__item">
                          <a
                            data-button-aria-label=""
                            class="bux-sidebar-nav__link"
                            href="#"
                            rel="noopener"
                          >
                            Level 5 Link
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li class="bux-sidebar-nav__item">
                      <a
                        data-button-aria-label=""
                        class="bux-sidebar-nav__link"
                        href="#"
                        rel="noopener"
                      >
                        Level 4 Link
                      </a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                      <a
                        data-button-aria-label=""
                        class="bux-sidebar-nav__link"
                        href="#"
                        rel="noopener"
                      >
                        Level 4 Link
                      </a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                      <a
                        data-button-aria-label=""
                        class="bux-sidebar-nav__link"
                        href="#"
                        rel="noopener"
                      >
                        Level 4 Link
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="bux-sidebar-nav__item">
                  <a
                    data-button-aria-label=""
                    class="bux-sidebar-nav__link"
                    href="#"
                    rel="noopener"
                  >
                    Level 3 Link
                  </a>
                </li>
                <li class="bux-sidebar-nav__item">
                  <a
                    data-button-aria-label=""
                    class="bux-sidebar-nav__link"
                    href="#"
                    rel="noopener"
                  >
                    Level 3 Link
                  </a>
                </li>
                <li class="bux-sidebar-nav__item">
                  <a
                    data-button-aria-label=""
                    class="bux-sidebar-nav__link"
                    href="#"
                    rel="noopener"
                  >
                    Level 3 Link
                  </a>
                </li>
              </ul>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
          </ul>
        </li>
        <li class="bux-sidebar-nav__item">
          <a
            data-button-aria-label=""
            class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
            href="#"
            rel="noopener"
          >
            Level 1 Link
          </a>

          <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
          </ul>
        </li>
        <li class="bux-sidebar-nav__item">
          <a
            data-button-aria-label=""
            class="bux-sidebar-nav__link"
            href="#"
            rel="noopener"
          >
            Level 1 Link
          </a>
        </li>
        <li class="bux-sidebar-nav__item">
          <a
            data-button-aria-label=""
            class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
            href="#"
            rel="noopener"
          >
            Level 1 Link
          </a>

          <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
            <li class="bux-sidebar-nav__item">
              <a
                data-button-aria-label=""
                class="bux-sidebar-nav__link"
                href="#"
                rel="noopener"
              >
                Level 2 Link
              </a>
            </li>
          </ul>
        </li>
        <li class="bux-sidebar-nav__item">
          <a
            data-button-aria-label=""
            class="bux-sidebar-nav__link"
            href="#"
            rel="noopener"
          >
            Level 1 Link
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

{#
Buckeye UX - version 1.6.5
Copyright (C) 2026 The Ohio State University
#}

{#

Sidebar Nav

Available Variables:
  - nav_id:                 Unique ID for the sidebar nav.
  - aria_label:             Aria-label for the sidebar nav.
  - title:                  Heading for the sidebar nav. Shown above the links, and inside the panel on mobile.
  - toggle_text:            Label for the button that opens the nav on mobile.
  - modifier:               Set to mobile-hidden to hide on mobile instead of collapsing behind the toggle button.
  - expand_active_submenu:  Boolean. Set to true to expand the active item's submenu.
  - panel_expanded:         Boolean. Set to true to render the mobile panel already open.
  - items:                  Array containing the sidebar nav items: title, url, active, subitems

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 08-20-2026 11:34:39
#}

{% import '@bux/_macros/nav.twig' as nav %}

<div
  class="bux-container bux-container--sidebar-nav {{ modifier ? ' bux-container--sidebar-nav__' ~ modifier : '' }}"
  expand-active-submenu="{{ expand_active_submenu }}"
>
  <button
    id="{{ nav_id }}-toggle"
    type="button"
    class="bux-sidebar-nav__toggle"
    aria-controls="{{ nav_id }}-panel"
    aria-expanded="{{ panel_expanded ? 'true' : 'false' }}"
  >
    <span class="bux-sidebar-nav__toggle-label">{{ toggle_text|default('View related pages') }}</span>
  </button>
  <div id="{{ nav_id }}-panel" class="bux-sidebar-nav__panel">
    {% if title %}
      <h2 class="bux-sidebar-nav__title">{{ title }}</h2>
    {% endif %}
    <nav id="{{ nav_id }}" aria-label="{{ aria_label }}" class="disclosure-nav disclosure-nav-orientation-vertical">
      {% if items %}
        <ul class="bux-sidebar-nav">
          {% for item in items %}
            <li class="bux-sidebar-nav__item">
              {{ nav.link(item, 0, 'bux-sidebar-nav', false) }}
              {% if item.subitems %}
                {{ nav.tree(item.subitems, 1, 'bux-sidebar-nav', false) }}
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </nav>
  </div>
</div>

Usage

Dos

• Use Sidebar Navigation if there is a large amount of content and/or if lower-level sections are closely related and users will need to quickly jump between them
• Use short, clear link text
• Limit to four levels deep of links – as in four child pages
• Keep the menu consistent among pages
• If possible, conduct usability tests and review analytics to confirm your site’s information architecture is meeting your audiences’ needs

Don’ts

• Don't use if a website has little content and shallow hierarchy; consider the default Menu
• Don't use if a website has a moderate amount of content; consider a dropdown Menu in order to help users quickly preview lower-level content
• Don’t mix page links (links to unique pages) and anchor links (links to locations within a page) within a sidebar navigation because it will confuse the user
• Don’t nest links more than four levels deep – as in four child pages

Implementation Notes

On mobile, the sidebar collapses behind a toggle button and the links move into a disclosure panel. Use toggle_text to change the button label (it defaults to "View related pages"), title to add a heading above the links, and panel_expanded: true to render the panel already open.

Set modifier: mobile-hidden to hide the sidebar on mobile entirely rather than collapsing it. This is meant to overlap with the Menu functionality that displays the complete menu tree on mobile by default.

Accessibility

When the current page is one of the link items in the navigation, that link should have the attribute-value pair aria-current="page" added to the <a> element.

Example:

This code snippet is of a submenu where the browser is on page 2.3.html.

<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
  <li class="bux-sidebar-nav__item">
    <a href="#" class="bux-sidebar-nav__link">Item 2.1</a>
  </li>
  <li class="bux-sidebar-nav__item">
    <a href="#" class="bux-sidebar-nav__link">Item 2.2</a>
  </li>
  <li class="bux-sidebar-nav__item">
    <a href="#" class="bux-sidebar-nav__link" aria-current="page">Item 2.3</a>
  </li>
  <li class="bux-sidebar-nav__item">
    <a href="#" class="bux-sidebar-nav__link">Item 2.4</a>
  </li>
</ul>

References

• U.S. Web Design System (USWDS) Side Navigation