Global Navigation

The most important AppDirect links for end-users sit at the top of the page. The Primary Universal Navigation supports a varity of AppDirect products for mobile and desktop and may display product and global notifications.

Tooltips help to epxlain the icons and a global searchbar using AppWise 'Search everything' technology is displayed next to the account information.

Universal Navigation Example on Featured Products

<section class="adb-profile_header adb-header-universalnav" id="ad-universalnav">
  <nav class="adb-primary_nav adb-responsive">
    <ul class="adb-primary_nav--items adb-layout-default">
      <!-- / LEFT Mobile Menu -->
      <li class="adb-primary_nav--item adb-primary_mobile-menu adb-primary_mobile-menu__logo adb-hide-medium-up adb-is-separated">
        <div class="adb-js-context_menu adb-context_menu" data-placement="left">
          <a class="adb-primary_nav--link adb-primary_hamburger-menu adb-js-context_menu--trigger" role="button">
            <i class="adb-icon__hamburger"></i>
          </a>
          <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
            <ul class="adb-stack adb-hide-medium-up">
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/myapps.html"><i class="adb-icon__universal_nav_myapps"></i>
                &nbsp;
                MyApps
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/myapps.html"><i class="adb-icon__universal_nav_home"></i>
                &nbsp;
                Home
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="https://marketplace.appdirect.com/appwise"><i class="adb-icon__universal_nav_messenger"></i>
                &nbsp;
                Teams
                <div class="adb-badge adb-badge__notification">5+</div>
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="https://dashboard.appinsights.com"><i class="adb-icon__universal_nav_insights"></i>
                &nbsp;
                Insights
                </a>

              </li>
              <li class="adb-stack--item">
                                <a class="adb-link__option adb-stack--item_content" href="../../prototype/account/myapps.html"><i class="adb-icon__universal_nav_cart"></i>
                &nbsp;
                Marketplace
                </a>

              </li>
            </ul>
          </div>
        </div>
        <div class="adb-badge--container adb-badge--container--hamburger adb-header-universalnav--badge">
          <span class="adb-badge adb-badge adb-badge__notification">
            5+
          </span>
        </div>
      </li>
      <li class="adb-primary_nav--item adb-primary__logo adb-show-medium-up">
                <a class="adb-primary_nav--link ad-icon-link" href="/"><span class="adb-primary_nav--logo">Acme Marketplace</span>
        </a>

      </li>
      <li class="adb-primary_nav--item adb-primary__myapps">
                <a class="adb-primary_nav--link ad-icon-link" title="See all my apps" data-placement="bottom" data-toggle="tooltip" href="../../prototype/account/myapps.html"><i class="adb-icon__universal_nav_myapps"></i>
        </a>

      </li>
      <li class="adb-primary_nav--item adb-show-medium-up">
                <a class="adb-primary_nav--link ad-icon-link" title="Home" data-placement="bottom" data-toggle="tooltip" href="/"><i class="adb-icon__universal_nav_home"></i>
        </a>

      </li>
      <li class="adb-primary_nav--item adb-show-medium-up">
                <a class="adb-primary_nav--link ad-icon-link" title="Teams" data-placement="bottom" data-toggle="tooltip" href="https://marketplace.appdirect.com/appwise"><i class="adb-icon__universal_nav_messenger"></i>
        <div class="adb-badge--container adb-header-universalnav--badge">
          <span class="adb-badge adb-badge adb-badge__notification">
            5+
          </span>
        </div>
        </a>

      </li>
      <li class="adb-primary_nav--item adb-show-medium-up">
                <a class="adb-primary_nav--link ad-icon-link" title="Insights" data-placement="bottom" data-toggle="tooltip" href="https://dashboard.appinsights.com"><i class="adb-icon__universal_nav_insights"></i>
        </a>

      </li>
      <li class="adb-primary_nav--item adb-show-medium-up">
                <a class="adb-primary_nav--link ad-icon-link" title="Marketplace" data-placement="bottom" data-toggle="tooltip" href="../../prototype/marketplace/featured.html"><i class="adb-icon__universal_nav_cart"></i>
        <div class="adb-badge--container adb-header-universalnav--badge">
          <span class="adb-badge adb-badge adb-badge__notification">
            3
          </span>
        </div>
        </a>

      </li>
      <li class="adb-primary_nav--item adb-primary__logo adb-primary_nav--item--centered adb-hide-medium-up">
                <a class="adb-primary_nav--link" href="/"><span class="adb-primary_nav--logo">Acme Marketplace</span>
        </a>

      </li>
      <!-- / CENTER SEARCH -->
      <li class="adb-primary_nav--item adb-primary_nav--item--centered adb-visible-medium-up">
        <div class="adb-primary_nav--search" id="appdirectUniversalSearch">
          <div class="adb-search_field adb-input_row adb-js-input_row">
            <div class="adb-input_row--item adb-input_row--tertiary">
              <div class="adb-input_row--item adb-input_row--tertiary">
                <menu class="adb-js-context_menu adb-context_menu">
                  <div class="adb-input_row--item_content adb-dropdown adb-dropdown__inset adb-dropdown__small adb-js-context_menu--trigger">
                    <span class="adb-js-dropdown-placeholder">All</span>
                  </div>
                  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
                    <ul class="adb-stack">
                      <li class="adb-stack--item adb-is-selected adb-is-active">
                        <a class="adb-link__option adb-stack--item_content">
                          All
                        </a>
                      </li>
                      <li class="adb-stack--item">
                        <a class="adb-link__option adb-stack--item_content">
                          Apps
                        </a>
                      </li>
                      <li class="adb-stack--item">
                        <a class="adb-link__option adb-stack--item_content">
                          Marketplace
                        </a>
                      </li>
                      <li class="adb-stack--item">
                        <a class="adb-link__option adb-stack--item_content">
                          People
                        </a>
                      </li>
                    </ul>
                  </div>
                </menu>
              </div>
              <div class="adb-input_row--item"></div>
            </div>
            <div class="adb-input_row--item adb-input_row--primary">
              <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
            </div>
            <div class="adb-input_row--item adb-input_row--secondary">
              <button class="adb-button__square_small adb-input_row--item_content">
                <i class="adb-icon__search"></i>
              </button>
            </div>
          </div>
        </div>
      </li>
      <!-- /  MOBILE SEARCH -->
      <li class="adb-primary_nav--item adb-primary__search adb-hide-medium-up">
        <menu class="adb-js-context_menu adb-context_menu" data-placement="right">
          <a class="adb-js-context_menu--trigger adb-primary_nav--link" role="button">
            <i class="adb-icon__search"></i>
          </a>
          <div class="adb-context_menu--menu adb-js-context_menu--menu adb-primary_nav--search adb-is-floating" data-position="transparent" role="menu">
            <div class="adb-search_field adb-input_row adb-js-input_row">
              <div class="adb-input_row--item adb-input_row--tertiary">
                <div class="adb-input_row--item_content adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
                  <select>
                    <option>All</option>
                    <option>Apps</option>
                    <option>Marketplace</option>
                    <option>People</option>
                  </select>
                </div>
              </div>
              <div class="adb-input_row--item adb-input_row--primary">
                <input class="adb-search_field--input adb-text__small adb-input_row--item_content" placeholder="Search" type="search">
              </div>
              <div class="adb-input_row--item adb-input_row--secondary">
                <button class="adb-button__square_small adb-input_row--item_content" type="submit">
                  <i class="adb-icon__search"></i>
                </button>
              </div>
            </div>
          </div>
        </menu>
      </li>
      <!-- /  MOBILE SEARCH -->
      <!-- / RIGHT -->
      <li class="adb-primary_nav--item adb-show-large-up adb-primary_nav--item__right adb-primary_nav--item__right__first">
                <a class="adb-primary_nav--link" href="../../prototype/account/dashboard.html">Account
        </a>

      </li>
      <li class="adb-primary_nav--item adb-primary_nav--item__right">
        <div class="adb-js-context_menu adb-context_menu" data-placement="right">
          <div class="avatar-container adb-hide-medium-up">
            <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/lindaYang-48x48.png?1567620427" />
              </span>
            </a>
          </div>
          <div class="avatar-container adb-show-medium-up">
            <a class="adb-js-context_menu--trigger adb-context_menu--trigger adb-primary_nav--link adb-primary_nav--user" id="avatar-text" role="button">
              <span class="adb-id adb-id__sq_xxsmall">
                <img class="adb-id--img adb-primary_nav--user_image" src="../../images/avatars/lindaYang-48x48.png?1567620427" />
              </span>
              <span class="adb-show-xlarge-up">Jane</span>
            </a>
          </div>
          <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 class="adb-container_header">
              <h5 class="adb-container_header--title adb-container_header--item">Manage</h5>
            </div>
            <ul class="adb-stack">
              <li class="adb-stack--item adb-hide-large-up">
                <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/corporate/customers/users.html">Corporate</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>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="../../prototype/reseller/dashboard.html">Reseller</a>
              </li>
            </ul>
            <div class="adb-container_header">
              <h5 class="adb-container_header--title adb-container_header--item">Company</h5>
            </div>
            <ul class="adb-stack">
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="">AppDirect</a>
              </li>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="">Base</a>
              </li>
              <li class="adb-stack--item">
                <a class="adb-link__option adb-stack--item_content" href="">Chase</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</section>

This navigation pattern is used for AppDirect's Marketplace environment and features link text and context menus for the main navigation.

<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/lindaYang-48x48.png?1567620427" />
            </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>

The Primary Navigation may display reduced navigation patterns with a focus on step actions and pricing information. Minimal branding may appear as well. The header and it's contents spread over the entire width of the viewport.

Primary Action Buttons and Insetted Primary Header Buttons should be considered for this header style.

Marketplace
Due Today

$380.00

<section class="adb-profile_header adb-profile_header__checkout adb-profile_header__checkout--condensed header-branded--appdirect">
  <nav class="adb-primary_nav adb-responsive adb-profile_header__checkout--branded" id="checkout--branded">
    <ul class="adb-primary_nav--items">
      <li class="adb-primary_nav--item">
        <div class="adb-primary_nav--link">
          <button class="adb-button__inset_header__primary adb-button__large" id="checkout--branded-back">
            <span class="adb-show-root-only">
              <i class="adb-icon__arrow_left"></i>
            </span>
            <span class="adb-show-xsmall-only">
              Back
            </span>
            <span class="adb-show-small-up">
              Back to Shopping
            </span>
          </button>
        </div>
      </li>
      <li class="adb-primary_nav--item adb-primaray__logo adb-primary_nav--item--centered">
              <a class="adb-primary_nav--link" href="/"><span class="adb-primary_nav--logo">Marketplace</span>
        </a>
  
      </li>
      <li class="adb-primary_nav--item adb-primary_nav--item__right">
        <nav class="adb-primary_nav--actions header-total-proceed">
          <div class="adb-primary_nav--title">
            <div class="adb-profile_header--control">
              <h5 class="adb-summary--title adb-profile_header--caption" id="checkout--branded-total-text">
                Due Today
              </h5>
              <h1 class="header-total adb-summary--title adb-profile_header--title" id="checkout--branded-total-price">
                $380.00
              </h1>
            </div>
          </div>
          <div class="adb-primary_nav--link">
            <button class="adb-button adb-button__primary adb-button__large" id="checkout--branded-proceed">
              <span class="adb-show-root-only">
                <i class="adb-icon__arrow_right"></i>
              </span>
              <span class="adb-show-xsmall-only">
                Proceed
              </span>
              <span class="adb-show-small-up">
                Proceed to Payment
              </span>
            </button>
          </div>
        </nav>
      </li>
    </ul>
  </nav>
</section>

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 adb-responsive">
  <div class="adb-layout-default adb-secondary_nav--wrapper">
    <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>
  </div>
</nav>

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>

Base by AppDirect

Navigate

Global Navigation

Header Navigation

Primary Universal Navigation

Primary Legacy Navigation for Marketplace

Primary Navigation with Pricing and Primary / Secondary Buttons.

Secondary Navigation

Footer Navigation

Breadcrumbs

Default