Sidebar Navigation

JSThis component requires JavaScript.

Component status:Ready

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

<div
  class="bux-container bux-container--sidebar-nav bux-container--sidebar-nav__mobile-hidden"
>
  <nav
    id="sidebar-nav"
    aria-label="Sidebar Navigation"
    class="disclosure-nav disclosure-nav-orientation-vertical"
  >
    <ul class="bux-sidebar-nav">
      <li class="bux-sidebar-nav__item">
        <a
          href="#"
          class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
          >Item 1</a
        >
        <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
          <li class="bux-sidebar-nav__item">
            <a
              href="#"
              class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
              >Item 1.1</a
            >
            <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
              <li class="bux-sidebar-nav__item">
                <a href="#" class="bux-sidebar-nav__link">Item 1.1.1</a>
                <ul
                  class="disclosure-nav-submenu disclosure-nav-submenu-closed"
                >
                  <li class="bux-sidebar-nav__item">
                    <a
                      href="#"
                      class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
                      >Item 1.1.1.1</a
                    >
                    <ul
                      class="disclosure-nav-submenu disclosure-nav-submenu-closed"
                    >
                      <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link"
                          >Item 1.1.1.1.1</a
                        >
                      </li>
                      <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link"
                          >Item 1.1.1.1.2</a
                        >
                      </li>
                      <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link"
                          >Item 1.1.1.1.3</a
                        >
                      </li>
                      <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link"
                          >Item 1.1.1.1.4</a
                        >
                      </li>
                    </ul>
                  </li>
                  <li class="bux-sidebar-nav__item">
                    <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.2</a>
                  </li>
                  <li class="bux-sidebar-nav__item">
                    <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.3</a>
                  </li>
                  <li class="bux-sidebar-nav__item">
                    <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.4</a>
                  </li>
                </ul>
              </li>
              <li class="bux-sidebar-nav__item">
                <a href="#" class="bux-sidebar-nav__link">Item 1.1.2</a>
              </li>
              <li class="bux-sidebar-nav__item">
                <a href="#" class="bux-sidebar-nav__link">Item 1.1.3</a>
              </li>
              <li class="bux-sidebar-nav__item">
                <a href="#" class="bux-sidebar-nav__link">Item 1.1.4</a>
              </li>
            </ul>
          </li>
          <li class="bux-sidebar-nav__item">
            <a href="#" class="bux-sidebar-nav__link">Item 1.2</a>
          </li>
          <li class="bux-sidebar-nav__item">
            <a href="#" class="bux-sidebar-nav__link">Item 1.3</a>
          </li>
          <li class="bux-sidebar-nav__item">
            <a href="#" class="bux-sidebar-nav__link">Item 1.4</a>
          </li>
        </ul>
      </li>
      <li class="bux-sidebar-nav__item">
        <a
          href="#"
          class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
          >Item 2</a
        >
        <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">Item 2.3</a>
          </li>
          <li class="bux-sidebar-nav__item">
            <a href="#" class="bux-sidebar-nav__link">Item 2.4</a>
          </li>
        </ul>
      </li>
      <li class="bux-sidebar-nav__item">
        <a href="#" class="bux-sidebar-nav__link">Item 3</a>
      </li>
      <li class="bux-sidebar-nav__item">
        <a
          href="#"
          class="bux-sidebar-nav__link disclosure-nav-item-with-submenu"
          >Item 4</a
        >
        <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
          <li class="bux-sidebar-nav__item">
            <a href="#" class="bux-sidebar-nav__link">Item 4.1</a>
          </li>
          <li class="bux-sidebar-nav__item">
            <a
              href="#"
              class="bux-sidebar-nav__link bux-sidebar-nav__link--active"
              >Item 4.2</a
            >
          </li>
          <li class="bux-sidebar-nav__item">
            <a href="#" class="bux-sidebar-nav__link">Item 4.3</a>
          </li>
          <li class="bux-sidebar-nav__item">
            <a href="#" class="bux-sidebar-nav__link">Item 4.4</a>
          </li>
        </ul>
      </li>
      <li class="bux-sidebar-nav__item">
        <a href="#" class="bux-sidebar-nav__link">Item 5</a>
      </li>
    </ul>
  </nav>
</div>

{#
Buckeye UX - version 1.0.12
Copyright (C) 2024 The Ohio State University
#}

{# 

Sidebar Navigation

Available variables:

- nav_id:           Unique ID for the sidebar nav.
- aria_label:       Aria-label for the sidebar nav.
- modifier:         Set to 'mobile-hidden' to hide on mobile.
- items:            Array containing the sidebar nav items
- item.title:       Title of the sidebar nav item.
- item.url:         URL for the sidebar nav item.
- item.active:      Boolean. True if the item is active.
- item.subitems:    Array containing sidebar nav subitems.

#}

<div class="bux-container bux-container--sidebar-nav {% if modifier %}bux-container--sidebar-nav__{{ modifier }}{% endif %}">
	<nav id="{{ nav_id }}" aria-label="{{ aria_label }}" class="disclosure-nav disclosure-nav-orientation-vertical">
		{% if items %}
			<ul class="bux-sidebar-nav"> {# top level list #}
				{% for item in items %}
					<li class="bux-sidebar-nav__item">
						<a href="{{- item.url -}}" class="bux-sidebar-nav__link{% if item.active %} bux-sidebar-nav__link--active{% endif %}{% if item.subitems %} disclosure-nav-item-with-submenu{% endif %}">{{ item.title }}</a>
						{% if item.subitems %}
						<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed"> {# child level 1 list #}
							{% for subitem1 in item.subitems %}
							<li class="bux-sidebar-nav__item">
								<a href="{{- subitem1.url -}}" class="bux-sidebar-nav__link{% if subitem1.active %} bux-sidebar-nav__link--active{% endif %}{% if subitem1.subitems %} disclosure-nav-item-with-submenu{% endif %}">{{ subitem1.title }}</a>
								{% if subitem1.subitems %}
								<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed"> {# child level 2 list #}
									{% for subitem2 in subitem1.subitems %}
									<li class="bux-sidebar-nav__item">
										<a href="{{- subitem2.url -}}" class="bux-sidebar-nav__link{% if subitem2.active %} bux-sidebar-nav__link--active{% endif %}">{{ subitem2.title }}</a>
										{% if subitem2.subitems %}
										<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed"> {# child level 3 list #}
											{% for subitem3 in subitem2.subitems %}
											<li class="bux-sidebar-nav__item">
												<a href="{{- subitem3.url -}}" class="bux-sidebar-nav__link{% if subitem3.active %} bux-sidebar-nav__link--active{% endif %}{% if subitem3.subitems %} disclosure-nav-item-with-submenu{% endif %}">{{ subitem3.title }}</a>
												{% if subitem3.subitems %}
												<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed"> {# child level 4 list #}
													{% for subitem4 in subitem3.subitems %}
													<li class="bux-sidebar-nav__item">
														<a href="{{- subitem4.url -}}" class="bux-sidebar-nav__link{% if subitem4.active %} bux-sidebar-nav__link--active{% endif %}">{{ subitem4.title }}</a>
													</li>
													{% endfor %}
												</ul>
												{% endif %}
											</li>
											{% endfor %}
										</ul>
										{% endif %}
									</li>
									{% endfor %}
								</ul>
								{% endif %}
							</li>
							{% endfor %}
						</ul>
						{% endif %}
					</li>
				{% endfor %}
			</ul>
		{% endif %}	
	</nav>
</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

By default, modifier: mobile-hidden is set and will hide the sidebar on mobile. 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