Sidebar

The .sidebar class sets the element as sticky so that it remains visible as the user scrolls down the page, if used in combination with the Invoker Commands API, it will act as a slider that can be opened and closed by the user.

Check out the Demo Page which demonstrates all 3 behaviors mentioned below.

Sticky Demonstration

By default the sidebar will be sticky, meaning it will remain visible as the user scrolls down the page. This is useful for keeping important navigation or information accessible at all times.

<div class="pane contrast overflow-auto" style="height:300px;">
  <div style="border: 2px dashed var(--info-color); height:500px; width:200px;">
    <aside class="sidebar pane">
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#getting-started" aria-current="page">Getting Started</a></li>
          <li><a href="#advanced-usage">Advanced Usage</a></li>
          <li><a href="#uninstall">Uninstall</a></li>
        </ul>
      </nav>
    </aside>
  </div>
</div>

Combined with popover attribute

When combined with the popover attribute, the sidebar becomes interactive and can be opened by clicking on an element with the popovertarget attribute pointing to the sidebar's id.

By default adding a popover attribute will not make the sidebar invisible, it's up to you, to decide when the sidebar should be visible or not, maybe by adding the [hidden] attribute to the sidebar, or through responsive display utility classes.

<div style="height:300px;">
  <button class="mx-auto d-block" popovertarget="left-sidebar">Open Sidebar</button>
  
  <aside id="left-sidebar" hidden="true" popover="auto" class="sidebar pane w-25">
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#getting-started" aria-current="page">Getting Started</a></li>
        <li><a href="#advanced-usage">Advanced Usage</a></li>
        <li><a href="#uninstall">Uninstall</a></li>
      </ul>
    </nav>
  </aside>
</div>

Sliding from the right

By default the sidebar will slide from the left, but you can change this behavior by adding the data-placement="right" attribute to the sidebar, this will make the sidebar slide from the right instead.

<div style="height:300px;">
  <button class="mx-auto d-block" popovertarget="left-sidebar">Open Sidebar</button>
  
  <aside id="left-sidebar" data-placement="right" hidden="true" popover="auto" class="sidebar pane w-25">
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#getting-started" aria-current="page">Getting Started</a></li>
        <li><a href="#advanced-usage">Advanced Usage</a></li>
        <li><a href="#uninstall">Uninstall</a></li>
      </ul>
    </nav>
  </aside>
</div>