Global Navigation
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.
<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.
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
See Step Breadcrumbs to show progress through a series of pages or panels.