• 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

Navigation Controls

Pagination

  • Default
  • First Page
  • Last Page
1 2 3 4 5 90
<nav class="adb-pagination">
  <a class="adb-pagination--button adb-pagination--button__prev"></a>
  <a class="adb-pagination--button adb-pagination--button__first">1</a>
  <a class="adb-pagination--button">2</a>
  <span class="adb-pagination--current">3</span>
  <a class="adb-pagination--button">4</a>
  <a class="adb-pagination--button adb-pagination--button__middle">5</a>
  <span class="adb-pagination--ellipsis"></span>
  <a class="adb-pagination--button adb-pagination--button__last">90</a>
  <a class="adb-pagination--button adb-pagination--button__next"></a>
</nav>
1 2 3 4 5 90
<nav class="adb-pagination">
  <a class="adb-pagination--button adb-pagination--button__prev adb-is-disabled"></a>
  <span class="adb-pagination--current">1</span>
  <a class="adb-pagination--button">2</a>
  <a class="adb-pagination--button">3</a>
  <a class="adb-pagination--button">4</a>
  <a class="adb-pagination--button adb-pagination--button__middle">5</a>
  <span class="adb-pagination--ellipsis"></span>
  <a class="adb-pagination--button adb-pagination--button__last">90</a>
  <a class="adb-pagination--button adb-pagination--button__next"></a>
</nav>
1 86 87 88 89 90
<nav class="adb-pagination">
  <a class="adb-pagination--button adb-pagination--button__prev"></a>
  <a class="adb-pagination--button adb-pagination--button__first">1</a>
  <span class="adb-pagination--ellipsis"></span>
  <a class="adb-pagination--button">86</a>
  <a class="adb-pagination--button">87</a>
  <a class="adb-pagination--button">88</a>
  <a class="adb-pagination--button">89</a>
  <span class="adb-pagination--current">90</span>
  <a class="adb-pagination--button adb-pagination--button__next adb-is-disabled"></a>
</nav>

Version 1

1 2 3 4 5 90
<nav class="adb-pagination">
  <a class="adb-pagination--button adb-pagination--button__prev"></a>
  <a class="adb-pagination--button adb-pagination--button__first">1</a>
  <a class="adb-pagination--button">2</a>
  <span class="adb-pagination--current">3</span>
  <a class="adb-pagination--button">4</a>
  <a class="adb-pagination--button adb-pagination--button__middle">5</a>
  <span class="adb-pagination--ellipsis"></span>
  <a class="adb-pagination--button adb-pagination--button__last">90</a>
  <a class="adb-pagination--button adb-pagination--button__next"></a>
</nav>

Pagers

<nav class="adb-pager">
  <div class="adb-pager--pagination">
    <span class="adb-pager--pagination_item adb-is-active"></span>
    <span class="adb-pager--pagination_item"></span>
    <span class="adb-pager--pagination_item"></span>
    <span class="adb-pager--pagination_item"></span>
  </div>
</nav>
<nav class="adb-pager">
  <button class="adb-pager--item adb-pager--button__prev" type="button">
    <i class="adb-icon__arrow_left"></i>
    Previous
  </button>
  <button class="adb-pager--item adb-pager--button__next" type="button">
    Next
    <i class="adb-icon__arrow_right"></i>
  </button>
</nav>
<nav class="adb-pager">
  <button class="adb-pager--item adb-pager--button__prev adb-button__square_small" type="button">
    <i class="adb-icon__arrow_left"></i>
  </button>
  <div class="adb-pager--pagination adb-pager--item">
    <span class="adb-pager--pagination_item adb-is-active"></span>
    <span class="adb-pager--pagination_item"></span>
    <span class="adb-pager--pagination_item"></span>
    <span class="adb-pager--pagination_item"></span>
  </div>
  <button class="adb-pager--item adb-pager--button__next adb-button__square_small" type="button">
    <i class="adb-icon__arrow_right"></i>
  </button>
</nav>
1 of 3
<nav class="adb-pager">
  <button class="adb-pager--item adb-pager--button__prev adb-button__square_small" type="button">
    <i class="adb-icon__arrow_left"></i>
  </button>
  <div class="adb-pager--caption adb-pager--item">1 of 3</div>
  <button class="adb-pager--item adb-pager--button__next adb-button__square_small" type="button">
    <i class="adb-icon__arrow_right"></i>
  </button>
</nav>

Count Filter

<menu>
  <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small">
    <select>
      <option>25 Results</option>
      <option>50 Results</option>
      <option>100 Results</option>
      <option>All Results</option>
    </select>
  </div>
</menu>

Button Toggles

Menu

  • Default
  • Small Size
<menu class="adb-toggle_buttons" data-toggle="buttons-radio">
  <button class="adb-toggle_buttons--button active" type="button">Option 1</button>
  <button class="adb-toggle_buttons--button" type="button">Option 2</button>
  <button class="adb-toggle_buttons--button" type="button">Option 3</button>
  <button class="adb-toggle_buttons--button" type="button">Option 4</button>
</menu>
<menu class="adb-toggle_buttons" data-toggle="buttons-radio">
  <button class="adb-toggle_buttons--button adb-button__small active" type="button">Option 1</button>
  <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 2</button>
  <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 3</button>
  <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 4</button>
</menu>

Single Button

<button class="adb-toggle_button" data-label-active="Hide Settings" data-label-init="Show Settings" data-target="#" data-toggle="panel" type="button">
  Show Settings
</button>

Tags

  • Default
  • Within container
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
neque dolorem ipsum quia dolor
sit amet consectetur adipisci velit
<div class="adb-tag">
  <span class="adb-tag--text">
    sed quia non numquam eius
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    modi tempora incidunt ut labore
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    et dolore magnam aliquam quaerat
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    voluptatem ut enim ad minima
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    veniam quis nostrum exercitationem ullam
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    corporis nemo enim ipsam voluptatem
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    quia voluptas sit suscipit laboriosam
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    nisi ut aliquid ex ea
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    commodi consequatur quis autem vel
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
<div class="adb-tag">
  <span class="adb-tag--text">
    eum iure reprehenderit qui in
  </span>
  <a class="adb-tag--remove" href="#" title="Remove"></a>
</div>
ea voluptate velit esse quam
nihil molestiae et iusto odio
dignissimos ducimus qui blanditiis praesentium
laudantium totam rem voluptatum deleniti
atque corrupti quos dolores et
quas molestias excepturi sint occaecati
cupiditate non provident sed ut
perspiciatis unde omnis iste natus
error similique sunt in culpa
qui officia deserunt mollitia animi
<div class="adb-container adb-tags">
  <div class="adb-tag">
    <span class="adb-tag--text">
      id est laborum et dolorum
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      fuga et harum quidem rerum
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      facilis est et expedita distinctio
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      nam libero tempore cum soluta
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      nobis est eligendi optio cumque
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      nihil impedit quo porro quisquam
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      est qui minus id quod
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      maxime placeat facere possimus omnis
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      voluptas assumenda est omnis dolor
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
  <div class="adb-tag">
    <span class="adb-tag--text">
      repellendus temporibus autem quibusdam et
    </span>
    <a class="adb-tag--remove" href="#" title="Remove"></a>
  </div>
</div>

Videos

<div class="adb-video">
  <img class="adb-video--screenshot" src="../../images/content/sendgrid-preview.png?1625765173" />
</div>

Step Progress

Header Step Progress and Footer Step Flow are supposed to work in combination on the same page.

  1. 1. Order Information
  2. 2. Payment Information
  3. 3. Confirm Order
<nav class="adb-steps">
  <ol class="adb-steps--items">
    <li class="adb-steps--item">
      <span class="adb-steps--content">1. Order Information</span>
    </li>
    <li class="adb-steps--item adb-steps--item__current">
      <span class="adb-steps--content">2. Payment Information</span>
    </li>
    <li class="adb-steps--item">
      <span class="adb-steps--content">3. Confirm Order</span>
    </li>
  </ol>
</nav>

Footer Step Flow

Bottom placed step flow that permanently floats on the bottom of the page. The Footer Step Flow overlays the Page Footer. (remove inline CSS)

Back Cancel

Step 1

Submit
<div class="adb-footer-steps--container">
  <div class="adb-footer-steps" style="position: inherit;">
    <div class="adb-layout-default">
      <nav class="adb-pager">
        <div class="adb-pager--item">
                    <a class=" adb-pager--button__prev adb-button adb-button__medium adb-button__neutral" href="#"><i class="adb-icon__arrow_left"></i>
          Back
          </a>

                    <a class="adb-pager--item adb-button adb-button__medium adb-button__secret" href="#">Cancel
          </a>

        </div>
        <div class="adb-pager--pagination adb-pager--item">
          <p>Step 1</p>
        </div>
                <a class="adb-pager--item adb-button adb-button__medium adb-button__emphasis" href="#">Submit
        </a>

      </nav>
    </div>
  </div>
</div>
<div class="adb-footer-steps--container-anchor"></div>

Step Points

Like the Step Progress the Step Points guide the user through a flow process. Step Points are preferable for flows on mobile devices.

  • Started
  • Completed
  • Configure Order
  • Payment + Shipping
  • Review + Buy
<nav class="adb-points">
  <ul class="adb-points--items">
    <li class="adb-points--item adb-points--item__current">
      <span class="adb-points--content">Configure Order</span>
    </li>
    <li class="adb-points--item">
      <span class="adb-points--content">Payment + Shipping</span>
    </li>
    <li class="adb-points--item">
      <span class="adb-points--content">Review + Buy</span>
    </li>
  </ul>
</nav>
  • Configure Order
  • Payment + Shipping
  • Review + Buy
<nav class="adb-points">
  <ul class="adb-points--items">
    <li class="adb-points--item adb-points--item__completed">
      <span class="adb-points--content">Configure Order</span>
    </li>
    <li class="adb-points--item adb-points--item__completed">
      <span class="adb-points--content">Payment + Shipping</span>
    </li>
    <li class="adb-points--item adb-points--item__current">
      <span class="adb-points--content">Review + Buy</span>
    </li>
  </ul>
</nav>

Step Sections

1 Make sure your OpenID consumer reads the {openid} parameters

From now on, each AppDirect-powered marketplace will have its own OpenID provider instead of relying on www.appdirect.com. You will need to remove the hardcoded URL of AppDirect's OpenID provider in your consumer and replace it with the {openid} placeholder in your configuration to know which provider to query.

Your consumer should accept:

http://www.example.com/login?openid_identifier={openid}

2 Update your event listener URLs

The events can now be triggered on any AppDirect-powered marketplace. Instead of passing the event {token} , we're now passing the {eventUrl} , so you'll need to update the logic in your event listener accordingly. When receiving a call on one of your event listener URLs, you'll need to:

  • Verify the OAuth signature of the call to validate that it comes from an authorized AppDirect-powered marketplace
  • Read the {eventUrl} (instead of reading the event {token} )
  • Perform a GET to this URL signed with your OAuth credentials
  • Process the event as appropriate
  • Return a valid response to the event notification

Example URL before:

http://www.example.com/foo?token={token}

Example URL after:

http://www.example.com/foo?url={eventUrl}

3 Update the OpenID URLs for your existing users

OpenID data for your current marketplace users must be updated in your product's database.

Update OpenID data via SQL

If you use a SQL-based database, the form below will generate SQL script that will update the OpenID for your existing users. Input the name of the table that stores these OpenIDs and the name of the column in which they are stored, and then execute the SQL on your database.

Generate SQL to update OpenID URLs for existing users

Update OpenID data via manual export

Alternatively, you can export the user account information we have collected and manually update their OpenID values:

4 Update Integration Report

Let us know you have completed this step of the integration by checking off the "Migrate to the distributed API" item in your Integration Report.

<section class="adb-step_section">
  <h3>
    <span class="adb-step_section--number">1</span>
    Make sure your OpenID consumer reads the
    <code>{openid}</code>
    parameters
  </h3>
  <p>
    From now on, each AppDirect-powered marketplace will have its own OpenID provider instead of relying on
    <a>www.appdirect.com.</a>
    You will need to remove the hardcoded URL of AppDirect's OpenID provider in your consumer and replace it with the
    <code>{openid}</code>
    placeholder in your configuration to know which provider to query.
  </p>
  <p>Your consumer should accept:</p>
  <pre>http://www.example.com/login?openid_identifier={openid}</pre>
</section>
<section class="adb-step_section">
  <h3>
    <span class="adb-step_section--number">2</span>
    Update your event listener URLs
  </h3>
  <p>
    The events can now be triggered on any AppDirect-powered marketplace. Instead of passing the event
    <code>{token}</code>
    , we're now passing the
    <code>{eventUrl}</code>
    , so you'll need to update the logic in your event listener accordingly. When receiving a call on one of your event listener URLs, you'll need to:
  </p>
  <ul>
    <li>Verify the OAuth signature of the call to validate that it comes from an authorized AppDirect-powered marketplace</li>
    <li>
      Read the
      <code>{eventUrl}</code>
      (instead of reading the event
      <code>{token}</code>
      )
    </li>
    <li>Perform a GET to this URL signed with your OAuth credentials</li>
    <li>Process the event as appropriate</li>
    <li>Return a valid response to the event notification</li>
  </ul>
  <p>Example URL before:</p>
  <pre>http://www.example.com/foo?token={token}</pre>
  <p>Example URL after:</p>
  <pre>http://www.example.com/foo?url={eventUrl}</pre>
</section>
<section class="adb-step_section">
  <h3>
    <span class="adb-step_section--number">3</span>
    Update the OpenID URLs for your existing users
  </h3>
  <p>OpenID data for your current marketplace users must be updated in your product's database.</p>
  <h4>Update OpenID data via SQL</h4>
  <p>If you use a SQL-based database, the form below will generate SQL script that will update the OpenID for your existing users. Input the name of the table that stores these OpenIDs and the name of the column in which they are stored, and then execute the SQL on your database.</p>
  <form class="adb-form">
    <fieldset class="adb-container">
      <div class="adb-container_header">
        <h3 class="adb-container_header--title adb-container_header--item">
          <legend>Generate SQL to update OpenID URLs for existing users</legend>
        </h3>
      </div>
      <div class="adb-container_content">
        <div class="adb-form--field">
          <label for="table_name">
            SQL Table Name
          </label>
          <input id="table_name" type="text">
        </div>
        <div class="adb-form--field">
          <label for="column_name">
            SQL Column Name
          </label>
          <input id="column_name" type="text">
        </div>
        <div class="adb-form--field">
          <label class="adb-selector adb-js-checkbox" for="interactive-endpoint">
            <span class="adb-selector--input">
              <input checked id="interactive-endpoint" type="checkbox">
            </span>
            <span class="adb-selector--value">
              Show Comments
            </span>
          </label>
        </div>
      </div>
      <div class="adb-container_footer adb-container_footer__actionable">
        <button class="adb-button__inset" type="button">
          Generate SQL
        </button>
      </div>
    </fieldset>
  </form>
  <h4>Update OpenID data via manual export</h4>
  <p>Alternatively, you can export the user account information we have collected and manually update their OpenID values:</p>
  <menu class="adb-toolbar">
    <button class="adb-toolbar--item" type="button">
      Export Development (Test) Users
    </button>
    <button class="adb-toolbar--item" type="button">
      Export Production Users
    </button>
  </menu>
</section>
<section class="adb-step_section adb-step_section__last">
  <h3>
    <span class="adb-step_section--number">4</span>
    Update Integration Report
  </h3>
  <p>
    Let us know you have completed this step of the integration by checking off the "Migrate to the distributed API" item in your
    <a href="../../prototype/developer/editor/integration_report.html">Integration Report.</a>
  </p>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Update Integration Report
    </button>
    <button class="adb-toolbar--item" type="button">
      Edit Integration
    </button>
  </menu>
</section>
  • Framework
  • Navigate
  • Navigation Controls
  • 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%