Sidebar with Navigation

Best Practice

The first child element of the id=page-wrapper is the Sidebar with Navigation. This is the nav. For small devices like smartphones, it makes responsive adjustments. Add Top Level and Child Level items as needed.

• Used in the App Screen.
• Presents only two levels of navigation.
• Child pages should get the class active added to their class list, in both the li and a which hold the link when they’re being viewed.
• Current child pages also get the eye icon, when they’re being viewed. The same icon is used in Breadcrumbs to indicate the current page.
• Child items will only appear when they’re toggled by the button to the right of their parent link.
• The sidebar footer is empty by default but available for 1 or 2 short links.

Usage

<nav id="sidebar" class="sidebar-wrapper" aria-label="sidebar">
  <div class="sidebar-content">
    <div class="sidebar-brand">
      <a href="#" class="me-auto" tabindex="4">Digital Product Name</a>
    </div>
    <div class="sidebar-menu text-white">
      <ul>
        <!-- this is a parent nav item without a child menu -->
        <li class="sidebar-item">
          <div class="sidebar-dropdown-header">
            <a class="sidebar-nav-item " href="#">
              <span>Parent Nav Item</span>
            </a>
          </div>
        </li>
        <!-- this is a parent nav item with a child menu -->
        <li class="sidebar-item">
          <div class="sidebar-dropdown-header">
            <a class="sidebar-nav-item" href="#">
              <span>Parent Nav Item</span>
            </a>
            <a class="sidebar-dropdown-header-expand" href="javascript://" role="button">
              <span class="visually-hidden">Toggle Child Items</span>
              <span class="icon fas fa-fw fa-angle-right" aria-hidden="true"></span>
            </a>
          </div>
          <div class="sidebar-submenu">
            <ul>
              <li class="sidebar-item active">
                <a class="sidebar-nav-item active" href="#">
                  <span class="icon fas fa-fw fa-eye" aria-hidden="true"></span>
                  <span>Child Nav Item</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidebar-footer">
  </div>
</nav>