Header Navigation

Primary Navigation

The most important marketplace links for end-users sit at the top of the page.

<header class="adb-page_header">
  <nav class="adb-primary_nav">
    <ul class="adb-primary_nav--items adb-layout-default">
      <li class="adb-primary_nav--item">
                <a class="adb-primary_nav--link" href="/"><span class="adb-primary_nav--logo">Acme Marketplace</span>
        </a>

      </li>
      <li class="adb-primary_nav--item">
                <a class="adb-primary_nav--link" href="../../prototype/marketplace/featured.html">Marketplace
        </a>

      </li>
      <li class="adb-primary_nav--item">
                <a class="adb-primary_nav--link" href="../../prototype/account/myapps.html">Apps
        </a>

      </li>
      <li class="adb-primary_nav--item adb-is-active">
        <div class="adb-js-context_menu adb-context_menu">
          <a class="adb-js-context_menu--trigger adb-context_menu--trigger adb-primary_nav--link" role="button">
            Manage
          </a>
          <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
            <ul class="adb-stack">
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/dashboard.html">Account</a>
              </li>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="../../prototype/developer/dashboard.html">Developer</a>
              </li>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="../../prototype/channel/marketplace/dashboard.html">Marketplace</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li class="adb-primary_nav--item adb-primary_nav--item__right">
        <div class="adb-js-context_menu adb-context_menu" data-placement="right">
          <a class="adb-js-context_menu--trigger adb-context_menu--trigger adb-primary_nav--link adb-primary_nav--user" role="button">
            <span class="adb-id">
              <img class="adb-id--img adb-primary_nav--user_image" src="../../images/avatars/benDomanico-48x48.png" />
            </span>
          </a>
          <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
            <ul class="adb-stack">
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/user/">My Profile</a>
              </li>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/company/user-profile.html">My Company</a>
              </li>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/settings.html">My Settings</a>
              </li>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="http://ad.docs.appdirect.com">Help Center</a>
              </li>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="/">Log out</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</header>

Secondary Navigation

Sub-navigation for settings sits in a secondary header bar that also spans the width of the browser.

Marketplace Manager
Marketplace
Products
Settings

<nav class="adb-secondary_nav">
  <ul class="adb-secondary_nav--items">
    <li class="adb-secondary_nav--item adb-secondary_nav--item__breadcrumb">
      <span class="adb-secondary_nav--content adb-secondary_nav--title">Marketplace Manager</span>
    </li>
    <li class="adb-secondary_nav--item">
            <a class="adb-secondary_nav--link" href="../../prototype/channel/marketplace/dashboard.html">Marketplace
      </a>

    </li>
    <li class="adb-secondary_nav--item">
            <a class="adb-secondary_nav--link" href="../../prototype/channel/products/catalog.html">Products
      </a>

    </li>
    <li class="adb-secondary_nav--item">
            <a class="adb-secondary_nav--link" href="../../prototype/channel/settings/vendors.html">Settings
      </a>

    </li>
  </ul>
</nav>

Footer Navigation

The footer contains non-essential site links and information.

<footer class="adb-page_footer">
  <div class="adb-page_footer--content adb-layout-default">
    <div class="adb-page_footer--content_item">
      <span class="adb-affix">Powered by AppDirect &copy; 2009&ndash;2014</span>
      <div class="adb-js-dropdown adb-dropdown adb-dropdown__small adb-dropdown__secret">
        <select>
          <option>English</option>
          <option>French</option>
          <option>German</option>
          <option>Swedish</option>
        </select>
      </div>
    </div>
    <nav class="adb-footer_nav adb-page_footer--content_item">
      <ul class="adb-footer_nav--items">
        <li class="adb-footer_nav--item">
          <a class="adb-footer_nav--link">
            Help Center
          </a>
        </li>
        <li class="adb-footer_nav--item">
          <a class="adb-footer_nav--link">
            Terms &amp; Conditions
          </a>
        </li>
        <li class="adb-footer_nav--item">
          <a class="adb-footer_nav--link">
            Contact
          </a>
        </li>
        <li class="adb-footer_nav--item">
          <span class="adb-footer_nav--content">
            Call us toll-free:
            <strong>
              (877) 404-APPS
            </strong>
          </span>
        </li>
      </ul>
    </nav>
  </div>
</footer>

Breadcrumbs

Usually located above the footer and below the body content, breadcrumb navigation allows users to identify their location within the site architecture and return previous sections.

Default

Page Title Is Here

<nav class="adb-breadcrumbs">
  <ul class="adb-breadcrumbs--items">
    <li class="adb-breadcrumbs--item">
            <a class="adb-breadcrumbs--link" href="../../"><i class="adb-icon__home"></i>
      </a>

    </li>
    <li class="adb-breadcrumbs--item">
      <a class="adb-breadcrumbs--link">
        Section
      </a>
    </li>
    <li class="adb-breadcrumbs--item adb-is-selected">
      <span class="adb-breadcrumbs--content">
        Current Page
      </span>
    </li>
  </ul>
</nav>

Footer

<nav class="adb-breadcrumbs adb-breadcrumbs__footer">
  <ul class="adb-breadcrumbs--items">
    <li class="adb-breadcrumbs--item">
            <a class="adb-breadcrumbs--link" href="../../">Framework
      </a>

    </li>
    <li class="adb-breadcrumbs--item">
            <a class="adb-breadcrumbs--link" href="global_navigation.html">Navigate</a>

    </li>
    <li class="adb-breadcrumbs--item adb-is-selected">
      <span class="adb-breadcrumbs--content">
        Global Navigation
      </span>
    </li>
  </ul>
</nav>

See Step Breadcrumbs to show progress through a series of pages or panels.