Base by AppDirect | Vertical Navigation

Vertical Navigation

Sidebar Navigation

Use .adb-nav--header headings to label and separate different sections of navigation.

Basic

<div class="adb-layout-sidebar adb-layout-column__first">
  <div class="adb-container">
    <div class="adb-container_header">
      <h5 class="adb-container_header--title adb-container_header--item">Form Elements</h5>
    </div>
    <nav class="adb-stack">
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" href="/">Form Overview</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" href="/">Text Inputs</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" href="/">Selectors</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" href="/">Search</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" href="/">Upload</a>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" href="/">Sortable</a>
      </div>
    </nav>
  </div>
</div>

Nested

The primary case is a list of category links in which the parent category is also a link. Use .adb-count to show the number of items in a category.

<div class="adb-layout-sidebar adb-layout-column__first">
  <div class="adb-container">
    <div class="adb-container_header">
      <h5 class="adb-container_header--title adb-container_header--item">Categories</h5>
    </div>
    <nav class="adb-stack">
      <div class="adb-stack--item adb-stack--item__nesting">
        <a class="adb-link__nav adb-stack--item_content adb-stack--item_content__nesting adb-is-selected" href="#">
          <span class="adb-stack--affix adb-link__nav--affix adb-count">6</span>
          Parent Category
        </a>
        <ul class="adb-stack">
          <li class="adb-stack--item">
            <a class="adb-link__nav adb-stack--item_content">
              <span class="adb-stack--affix adb-link__nav--affix adb-count">2</span>
              Child Category
            </a>
          </li>
          <li class="adb-stack--item">
            <a class="adb-link__nav adb-stack--item_content">
              <span class="adb-stack--affix adb-link__nav--affix adb-count">2</span>
              Child Category
            </a>
          </li>
          <li class="adb-stack--item">
            <a class="adb-link__nav adb-stack--item_content">
              <span class="adb-stack--affix adb-link__nav--affix adb-count">2</span>
              Child Category
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

Collapsing

Use when a parent category or heading expands on clicking to show child navigation but is not itself a linked page.

<div class="adb-layout-sidebar adb-layout-column__first">
  <div class="adb-container">
    <div class="adb-container_header">
      <h5 class="adb-container_header--title adb-container_header--item">Pricing</h5>
    </div>
    <nav class="adb-stack">
      <div class="adb-stack--item adb-stack--item__nesting">
        <a class="adb-link__nav adb-stack--item_content adb-stack--item_content__nesting collapsed" data-target="#editions-nav" data-toggle="collapse" href="#">
          <span class="adb-stack--affix adb-link__nav--affix adb-count">2</span>
          Editions
        </a>
        <ul class="adb-stack collapse" id="editions-nav">
          <li class="adb-stack--item">
            <a class="adb-link__nav adb-stack--item_content">
              Basic
            </a>
          </li>
          <li class="adb-stack--item">
            <a class="adb-link__nav adb-stack--item_content">
              Professional
            </a>
          </li>
          <li class="adb-stack--item">
            <div class="adb-stack--item_content">
              <button class="adb-button__small adb-button__secondary" type="button">
                <i class="adb-icon__add"></i>
                Add Edition
              </button>
            </div>
          </li>
        </ul>
      </div>
      <div class="adb-stack--item adb-stack--item__nesting">
        <a class="adb-link__nav adb-stack--item_content adb-stack--item_content__nesting collapsed" data-target="#addons-nav" data-toggle="collapse" href="#addons-nav">
          <span class="adb-stack--affix adb-link__nav--affix adb-count">1</span>
          Add-Ons
        </a>
        <ul class="adb-stack collapse" id="addons-nav">
          <li class="adb-stack--item">
            <a class="adb-link__nav adb-stack--item_content">
              Data
            </a>
          </li>
          <li class="adb-stack--item">
            <div class="adb-stack--item_content">
              <button class="adb-button__small adb-button__secondary" type="button">
                <i class="adb-icon__add"></i>
                Add Add-On
              </button>
            </div>
          </li>
        </ul>
      </div>
      <div class="adb-stack--item">
        <a class="adb-link__nav adb-stack--item_content" href="#">
          Shared Features &amp; Footnotes
        </a>
      </div>
    </nav>
  </div>
</div>

Sortable

<div class="adb-layout-sidebar adb-layout-column__first">
  <div class="adb-container">
    <nav class="adb-stack adb-js-sortable">
      <div class="adb-stack--item adb-js-sortable-item">
        <a class="adb-link__nav adb-stack--item_content">
          <i class="adb-js-sortable-reorder adb-sortable--reorder adb-link__nav--affix adb-stack--affix"></i>
          reprehenderit ut
        </a>
      </div>
      <div class="adb-stack--item adb-js-sortable-item">
        <a class="adb-link__nav adb-stack--item_content">
          <i class="adb-js-sortable-reorder adb-sortable--reorder adb-link__nav--affix adb-stack--affix"></i>
          nulla ea suscipit
        </a>
      </div>
      <div class="adb-stack--item adb-js-sortable-item">
        <a class="adb-link__nav adb-stack--item_content">
          <i class="adb-js-sortable-reorder adb-sortable--reorder adb-link__nav--affix adb-stack--affix"></i>
          voluptas rerum
        </a>
      </div>
      <div class="adb-stack--item adb-js-sortable-item">
        <a class="adb-link__nav adb-stack--item_content">
          <i class="adb-js-sortable-reorder adb-sortable--reorder adb-link__nav--affix adb-stack--affix"></i>
          vero et
        </a>
      </div>
      <div class="adb-stack--item adb-js-sortable-item">
        <a class="adb-link__nav adb-stack--item_content">
          <i class="adb-js-sortable-reorder adb-sortable--reorder adb-link__nav--affix adb-stack--affix"></i>
          eum odio
        </a>
      </div>
      <div class="adb-stack--item adb-js-sortable-item">
        <a class="adb-link__nav adb-stack--item_content">
          <i class="adb-js-sortable-reorder adb-sortable--reorder adb-link__nav--affix adb-stack--affix"></i>
          rerum sunt libero
        </a>
      </div>
      <div class="adb-stack--item adb-js-sortable-item">
        <a class="adb-link__nav adb-stack--item_content">
          <i class="adb-js-sortable-reorder adb-sortable--reorder adb-link__nav--affix adb-stack--affix"></i>
          sequi voluptas qui
        </a>
      </div>
      <div class="adb-stack--item adb-js-sortable-item">
        <a class="adb-link__nav adb-stack--item_content">
          <i class="adb-js-sortable-reorder adb-sortable--reorder adb-link__nav--affix adb-stack--affix"></i>
          officia repudiandae ut
        </a>
      </div>
    </nav>
  </div>
</div>