Sidebar Navigation

The sidebar component is a user interface element that provides navigation or supplementary content, typically positioned on the side of a webpage or application layout.

The sidebar component offers a flexible and customizable solution for organizing and displaying navigation links, widgets, or additional content within a webpage or application. It enhances user experience and facilitates easy access to relevant information.

When implementing the sidebar component, it is important to consider accessibility guidelines to ensure that it is usable for all users, including those with disabilities. Some accessibility considerations for the sidebar component include:

• Providing proper keyboard navigation and focus management for interactive elements within the sidebar.
• Ensuring sufficient color contrast between text and background to improve readability.
• Adding appropriate ARIA roles and attributes to enhance screen reader compatibility.
• Testing the sidebar component with assistive technologies to identify and address any potential accessibility issues.

The header is a prominent section located at the top of the sidebar navigation component. It is optional and serves the purpose of providing context and additional information related to the navigation menu and links within the sidebar.

<nav class="nav sidebarnav" aria-label="Group Form Navigation">
  <button
    class="btn sidebarnav-toggle nav-link d-md-none"
    data-bs-toggle="collapse"
    data-bs-target="#sidebarnav-mobile"
    aria-expanded="false">
    <span>Admin Pages</span>
    <div class="sidebar-caret bg-accent">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="1em"
        viewBox="0 0 512 512">
        <path
          d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
      </svg>
    </div>
  </button>

  <div class="w-100 d-md-block collapse" id="sidebarnav-mobile">
    <ul class="list-unstyled mb-0">
      <li class="nav-item header">
        <span class="nav-link sidebar-header"
          ><span class="sidebar-header">PAGE CONTENT</span></span
        >
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span>Basic Information</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span>Parent Groups</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span>Roles in this Group</span></a>
      </li>
      <li class="nav-item">
        <button
          class="btn w-100 sidebarnav-toggle d-flex justify-content-between align-items-center nav-link"
          data-bs-toggle="collapse"
          data-bs-target="#dashboard-collapse"
          aria-expanded="false">
          <span>Users</span>
          <div class="sidebar-caret">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="1em"
              viewBox="0 0 512 512">
              <path
                d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
            </svg>
          </div>
        </button>
        <div class="collapse" id="dashboard-collapse">
          <ul class="dropdown">
            <li class="nav-item">
              <a class="nav-link" href="#"><span>Overview</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><span>Weekly</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><span>Monthly</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><span>Annually</span></a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>

The sidebar component supports the following variants:

Full Height

The full-height variant is best used when there is only a header above it and a footer below. The sidebar is left positioned in the viewport and takes the full height of the content to the right of it. This variant provides a visually impactful and immersive layout.

Contained

The contained variant is best used when there is page content above or below the sidebar. The sidebar's height is determined by its own content and is placed within a container with gutters, blending seamlessly with the flow of content above and below it. The main content is positioned to the right of the sidebar.

Adding the class .fit-content to the sidebar will make it adjust its height based on the content inside, rather than taking the full height of it's column.

Tab

The tab variant allows the sidebar to toggle the visibility of content to the right of it instead of navigating to different pages. This variant is useful when you want to present multiple sets of related content and provide an intuitive way for users to switch between them. Implementing this variant requires additional JavaScript to handle the toggling functionality and cannot be done with BS5's standard JavaScript.

Anchored

The Anchored variant has the sidebar stuck the to the left side of the page with a fixed width, and content in a .container element. As the page is decreased, the sidebar pushes the contained content over, with the content staying centered.

Implementation

<section class="main-content sidebar-anchored">
  <aside>
    <nav class="nav sidebarnav" aria-label="Group Form Navigation">
      ...
    </nav>
  </aside>
  <main class="container">
    ...
  </main>
</section>

Custom variables were implemented for the anchored sidebar implementation

// Sass variable
$anchored-sidebarnav-width: 15rem;

// CSS custom property to override in-browser
--anchored-sidebarnav-width: $anchored-sidebarnav-width;