• Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototype
  • Acme Marketplace
  • Guidelines
  • Display
  • Navigate
  • Forms
  • Layout
  • Prototypes
    • Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototypes
    • Release Notes
    • Sass Documentation
    • Gulp Documentation
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Navigate

Guide users through the application

Global Navigation
Vertical Navigation
Page Navigation
Navigation Controls
Buttons
Context Menus

Vertical Navigation

Sidebar Navigation

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

Basic

Form Elements
Form Overview
Text Inputs
Selectors
Search
Upload
Sortable
<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.

Categories
6 Parent Category
  • 2 Child Category
  • 2 Child Category
  • 2 Child 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.

Pricing
2 Editions
  • Basic
  • Professional
1 Add-Ons
  • Data
Shared Features & Footnotes
<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

alias consequatur aut perferendis sit
voluptatem accusantium doloremque aperiam eaque
ipsa quae ab illo inventore
veritatis et quasi architecto beatae
vitae dicta sunt explicabo aspernatur
aut odit aut fugit sed
quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt
<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>
          neque dolorem ipsum quia dolor
        </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>
          sit amet consectetur adipisci velit
        </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>
          sed quia non numquam eius
        </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>
          modi tempora incidunt ut labore
        </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>
          et dolore magnam aliquam quaerat
        </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>
          voluptatem ut enim ad minima
        </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>
          veniam quis nostrum exercitationem ullam
        </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>
          corporis nemo enim ipsam voluptatem
        </a>
      </div>
    </nav>
  </div>
</div>
  • Framework
  • Navigate
  • Vertical Navigation
  • Powered by AppDirect © 2022
  • Contact Support
  • Terms & Conditions
  • Privacy Policy
    • Contact Support
    • Terms & Conditions
    • Privacy Policy
Themes
    Assistant
    • Bonzi
    • Clippy
    • F1
    • Genie
    • Genius
    • Links
    • Merlin
    • Peedy
    • Rocky
    • Rover
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%