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.
• Be sure to match the aria-controls of the <button> and the id of the child items group
• Be sure to toggle between aria-expanded when the child items are open
• 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>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>Nav Item with Child Items</span>
            </a>
            <button class="sidebar-dropdown-header-expand" aria-controls="ParentItem-01" aria-expanded="false">
              <span class="visually-hidden">Toggle Child Items</span>
              <span class="icon fas fa-fw fa-angle-right" aria-hidden="true"></span>
            </button>
          </div>
          <div class="sidebar-submenu" id="ParentItem-01">
            <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>

Optional Sidebar Search

Use Sidebar Search as an optional child component inside the sidebar. It remains enabled in Pelican’s internal sidebar by default, but product teams can choose whether to include it in their own implementation.

Add it to your sidebar

<nav id="sidebar" class="sidebar-wrapper" aria-label="Sidebar">
  <div class="sidebar-content">
    <div class="sidebar-brand">
      <a href="#" class="me-auto">Digital Product Name</a>
    </div>
    <div class="sidebar-search">
  <div>
    <form action="/search/" method="GET" role="search" aria-label="Site search" data-site-search>
      <div class="form-group mb-0 position-relative">
        <label for="sidebar-site-search" class="visually-hidden">Site search</label>
        <input type="search" name="q" class="form-control pe-5 sidebar-site-search-input" id="sidebar-site-search">
        <button type="submit" class="btn shadow-none btn-sm position-absolute top-50 end-0 translate-middle-y" aria-label="Search">
          <span class="visually-hidden">Search</span>
          <span class="icon fas fa-search" aria-hidden="true"></span>
        </button>
      </div>
    </form>
  </div>
</div>

    <div class="sidebar-menu text-white">
    <!-- navigation items -->
    </div>
  </div>
</nav>

Implementation steps and advice

1. Add the include directly under the sidebar brand and above .sidebar-menu for consistent spacing and reading order.

2. Set the form’s action to your application’s search endpoint, which must accept the q query parameter. This markup submits a native GET form; the distributed Pelican JavaScript does not provide a search endpoint or query synchronization. The data-site-search attribute is used only by this documentation site’s docs/js/default.js to synchronize inputs on its search results page.

3. If more than one sidebar exists on a page, copy the optional search markup and use a unique id/for pair (for example sidebar-site-search-secondary) to keep label/input associations valid.

4. Keep component styling in the SCSS/CSS pipeline (for example scss/_sidebar.scss); avoid page-level inline styles.