UI Schema

Navigation

Navs

Navs available in UI Schema have shared markup as well as shared states. Swap modifier classes to switch between each style.

<!-- Tabs -->
<ul class="ui-nav-tabs">
  <li class="ui-state-active"><a href="http://arxitics.com/">Home</a></li>
  <li><a href="http://arxitics.com/browse">Browse</a></li>
  <li><a href="http://arxitics.com/explore">Explore</a></li>
</ul>

<!-- Justified tabs -->
<ul class="ui-nav-tabs ui-nav-justified">
  <li class="ui-state-active"><a href="http://arxitics.com/">Home</a></li>
  <li><a href="http://arxitics.com/browse">Browse</a></li>
  <li><a href="http://arxitics.com/explore">Explore</a></li>
</ul>

<!-- Pills -->
<ul class="ui-nav-pills">
  <li class="ui-state-active"><a href="http://arxitics.com/">Home</a></li>
  <li><a href="http://arxitics.com/browse">Browse</a></li>
  <li><a href="http://arxitics.com/explore">Explore</a></li>
</ul>

<!-- Justified pills -->
<ul class="ui-nav-pills ui-nav-justified">
  <li class="ui-state-active"><a href="http://arxitics.com/">Home</a></li>
  <li><a href="http://arxitics.com/browse">Browse</a></li>
  <li><a href="http://arxitics.com/explore">Explore</a></li>
</ul>

<!-- Stacked pills -->
<ul class="ui-nav-stacked">
  <li class="ui-state-active"><a href="http://arxitics.com/">Home</a></li>
  <li><a href="http://arxitics.com/browse">Browse</a></li>
  <li><a href="http://arxitics.com/explore">Explore</a></li>
</ul>

Navbar

Arxitics

UI Schema

<header class="ui-header-navbar ui-container-fluid ui-container-grid">
  <div class="ui-navbar-brand">
    <h2><a href="http://arxitics.com/">Arxitics</a></h2>
  </div>
  <nav class="ui-navbar-nav ui-fluid-33 ui-mobile-auto">
    <ul>
      <li><a href="http://arxitics.com/browse">Browse</a></li>
      <li class="ui-menu-dropdown">
        <a aria-haspopup="true">Explore <span class="ui-caret-down"></span></a>
        <ul class="ui-seamless-top" role="menu">
          <li><a href="http://arxitics.com/articles">Collaborative Filtering</a></li>
          <li><a href="http://arxitics.com/search">Advanced Search</a></li>
          <li><a href="http://arxitics.com/search">Random Article</a></li>
          <li><a href="http://arxitics.com/visual">Data Visualization</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <div class="ui-navbar-account ui-float-right">
    <a class="ui-text-button ui-button-primary" href="http://arxitics.com/auth/login">Sign in</a>
  </div>
  <form class="ui-navbar-form ui-fluid-33 ui-mobile-expand ui-phone-hidden" action="http://arxitics.com/search" method="get" role="search">
    <div class="ui-input-addon">
      <input type="search" name="q" placeholder="Search or type a command">
      <button type="submit"><i data-schema-icon="search">Go!</i></button>
    </div>
  </form>
</header>

<header class="ui-header-navbar ui-container-fluid ui-container-grid">
  <div class="ui-navbar-brand">
    <h2><a href="http://arxitics.github.io/ui-schema/">UI Schema</a></h2>
  </div>
  <nav class="ui-navbar-nav ui-nav-collapse ui-phone-collapse">
    <a><i class="ui-zoom-large" data-schema-icon="menu"></i></a>
    <ul>
      <li class="ui-phone-visible ui-text-right"><a><i data-schema-icon="menu"></i></a></li>
      <li><a href="http://arxitics.github.io/ui-schema/css.html">CSS</a></li>
      <li><a href="http://arxitics.github.io/ui-schema/javascript.html">JavaScript</a></li>
      <li><a href="http://arxitics.github.io/ui-schema/examples.html">Examples</a></li>
      <li><a href="https://github.com/arxitics/ui-schema" rel="external" target="_blank">GitHub</a></li>
    </ul>
  </nav>
</header>

Breadcrumbs

  1. Arxitics
  2. Explore
  3. Data Visualization
  1. Arxitics
  2. Explore
  3. Data Visualization
<ol class="ui-nav-breadcrumb">
  <li><a href="http://arxitics.com/">Arxitics</a></li>
  <li><a href="http://arxitics.com/explore">Explore</a></li>
  <li class="ui-state-active">Data Visualization</li>
</ol>

Pagination

  1. «
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. »
  1. «
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. »
<ol class="ui-nav-pagination">
  <li><a href="http://arxitics.com/search?category=atom-ph&amp;perpage=25&amp;page=2" title="Previous page">&laquo;</a></li>
  <li><a href="http://arxitics.com/search?category=atom-ph&amp;perpage=25&amp;page=1">1</a></li>
  <li><a href="http://arxitics.com/search?category=atom-ph&amp;perpage=25&amp;page=2">2</a></li>
  <li class="ui-state-active"><span title="Current page">3</span></li>
  <li><a href="http://arxitics.com/search?category=atom-ph&amp;perpage=25&amp;page=4">4</a></li>
  <li><a href="http://arxitics.com/search?category=atom-ph&amp;perpage=25&amp;page=5">5</a></li>
  <li><a href="http://arxitics.com/search?category=atom-ph&amp;perpage=25&amp;page=4" title="Next page">&raquo;</a></li>
</ol>