3 #Navs Navs

Top-level navs.

For all tab types, an <a> tag is expected inside the <li>.

3.1 #Navs.Categories Categories lists

nav, nav-categories, nav-categories-label

Example 
<ul class="nav nav-categories">
  <li class="nav-categories-label">Category</li>
  <li><a href="#">Featured</a></li>
  <li class="is-active"><a href="#">Energy</a></li>
  <li><a href="#">Agriculture</a></li>
  <li><a href="#">Financials</a></li>
  <li><a href="#">Ferrous Metals</a></li>
</ul>

3.2 #Navs.Flyout Nav Flyout deprecated

nav, nav-flyout, nav-mobile

Deprecated: Deprecated as of version 3.1.0 and should no longer be used. Use Top Nav instead.

Main navigation bar with "flyout" menus. This is designed to go in the page header, immediately following the header bar. This module requires the use of JavaScript to toggle the is-active class on the active menu item. This class causes the nav-flyout-drawer in that item to open.

This menu is hidden for small breakpoints unless the is-open class is added. Be sure to include a nav-mobile menu with a link to open/close the flyout menu. Likewise, toggle is-flyout-open on the nav-mobile at the same time to slide it to the left. See the ICE homepage mockup for a complete example.

Example 
  <ul class="nav-mobile">
    <li class="nav-mobile-left">
      <a href="#"><i class="logo logo-white-xs"></i></a>
    </li>
    <li class="nav-mobile-right">
      <a id="flyout-toggle" href="#"><i class="sprite sprite-menu"></i></a>
    </li>
  </ul>
  <ul class="nav nav-flyout">
    <li><a href="#">Login</a></li>
    <li><a href="#">Products</a>
      <div class="nav-flyout-drawer">Flyout drawer. Put any contents here.</div>
    </li>
    <li class="nav-flyout-right is-standalone">
      <a href="#" class="btn btn-info btn-small">Login</a>
    </li>
  </ul>

3.3 #Navs.Tabs Tabs

nav, nav-tabs, nav-aside

Example 
  <ul class="nav nav-tabs">
    <li><a href="#"> Tab one</a></li>
    <li class="is-active"><a href="#"> Active tab</a></li>
    <li><a href="#"> Tab three</a></li>
    <li class="is-disabled"><a href="#"> Disabled tab</a></li>
    <li class="nav-aside">Aside</li>
  </ul>

3.4 #Navs.Tabs-Links Links lists

nav, nav-links, nav-aside, nav-links, label

Include an optional nav-links-label to add a label to the list.

Examples
Default styling
nav-links-compact
Add to save space when you have a lot of tabs 
<ul class="nav nav-links [modifier class]">
  <li class="nav-links-label">Related links</li>
  <li><a href="#"> Link one</a></li>
  <li class="is-active"><a href="#"> Active Link</a></li>
  <li><a href="#"> Link three</a></li>
  <li class="is-disabled"><a href="#"> Disabled Link</a></li>
  <li class="nav-aside">Aside</li>
</ul>

3.5 #Navs.Tabs-Secondary Secondary Tabs lists

nav, nav-tabs-secondary, nav-aside

Example 
<ul class="nav nav-tabs-secondary">
  <li><a href="#"> Tab one</a></li>
  <li class="is-active"><a href="#"> Active tab</a></li>
  <li><a href="#"> Tab three</a></li>
  <li class="is-disabled"><a href="#"> Disabled tab</a></li>
  <li class="nav-aside">Aside</li>
</ul>

3.6 #Navs.Top-Nav Top Nav

topnav

Use JavaScript to add the is-active class to an <li> top open the menu. Use is-highlighted on an <li> to indicate it is section of the site that the user is currently on.

Examples
Default styling
topnav--secondary
Secondary nav style. This version has a transparent background color, allowing the container’s color to show through (e.g. a navbar navbar--secondary). 
<ul class="topnav [modifier class]">
  <li>
    <button>Trade</button>
    <div class="topnav__menu">
      Any content here
    </div>
  </li>
  <li>
    <button>Clearing</button>
    <div class="topnav__menu">
      <div class="topnav-section">
        <h4 class="topnav-section__heading"><a href="#">About ICE Markets</a></h4>
        <ul class="topnav-list">
          <li><a href="#">
            <span class="topnav-list__title">Asset Classes</span>
            <span class="topnav-list__description">Trading Across B Liquid Types</span>
          </a></li>
          <li><a href="#">
            <span class="topnav-list__title">Exchanges</span>
            <span class="topnav-list__description">Powering Global Markets</span>
          </a></li>
          <li><a href="#">
            <span class="topnav-list__title">Trading Tools</span>
            <span class="topnav-list__description">Technology for your workflow</span>
          </a></li>
          <li><a href="#">
            <span class="topnav-list__title">Connectivity to Markets</span>
            <span class="topnav-list__description">Secure low latency access</span>
          </a></li>
        </ul>
      </div>
      <div class="topnav-section">
        <h4 class="topnav-section__heading"><a href="#">Featured Products</a></h4>
        <ul class="topnav-list">
          <li><a href="#">
            <span class="topnav-list__title">Asset Classes</span>
            <span class="topnav-list__description">Trading Across B Liquid Types</span>
          </a></li>
          <li><a href="#">
            <span class="topnav-list__title">Exchanges</span>
            <span class="topnav-list__description">Powering Global Markets</span>
          </a></li>
          <li><a href="#">
            <span class="topnav-list__title">Trading Tools</span>
            <span class="topnav-list__description">Technology for your workflow</span>
          </a></li>
          <li><a href="#">
            <span class="topnav-list__title">Connectivity to Markets</span>
            <span class="topnav-list__description">Secure low latency access</span>
          </a></li>
        </ul>
        <div class="topnav-section__cta">
          <a href="#" class="btn">View all traded contracts</a>
        </div>
      </div>
    </div>
  </li>
  <li class="is-highlighted">
    <button>Data Services</button>
    <div class="topnav__menu">
      Any content here
    </div>
  </li>
</ul>

3.6.1 #Navs.Top-Nav.Section Top Nav Section

A section to use in the topnav dropdown. Stack two or three side by side.

Example

About ICE Markets

  • Item 1
  • Item 2
  • Item 3

Featured Products

  • Item 1
  • Item 2
  • Item 3
View all traded contracts 
<div class="topnav-section">
  <h4 class="topnav-section__heading"><a href="#">About ICE Markets</a></h4>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
<div class="topnav-section">
  <h4 class="topnav-section__heading"><a href="#">Featured Products</a></h4>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div class="topnav-section__cta">
    <a href="#" class="btn">View all traded contracts</a>
  </div>
</div>

3.6.2 #Navs.Top-Nav.List Top Nav List

topnav-list, topnav-list__title, topnav-list__description

Example 
<ul class="topnav-list">
  <li><a href="#">
    <span class="topnav-list__title">Asset Classes</span>
    <span class="topnav-list__description">Trading Across B Liquid Types</span>
  </a></li>
  <li><a href="#">
    <span class="topnav-list__title">Exchanges</span>
    <span class="topnav-list__description">Powering Global Markets</span>
  </a></li>
  <li><a href="#">
    <span class="topnav-list__title">Trading Tools</span>
    <span class="topnav-list__description">Technology for your workflow</span>
  </a></li>
  <li><a href="#">
    <span class="topnav-list__title">Connectivity to Markets</span>
    <span class="topnav-list__description">Secure low latency access</span>
  </a></li>
</ul>

3.7 #Navs.Sidenav Side Navigation

nav, nav-sidenav

Example 
  <ul class="nav nav-sidenav">
    <li><a href="#">ICE Futures U.S.</a></li>
    <li class="is-active">
      <a href="#">ICE Futures Europe</a>
      <ul class="nav">
        <li><a href="#">Regulation</a></li>
        <li><a href="#">Circulars</a></li>
        <li class="is-active">
          <a href="#">Membership</a>
          <ul class="nav">
            <li><a href="#">Singapore Mercantile Exchange</a></li>
            <li class="is-active"><a href="#">ICE Swap Trade</a></li>
            <li><a href="#">ICE Endex</a></li>
          </ul>
        </li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Market Resources</a></li>
      </ul>
    </li>
    <li><a href="#">ICE Futures Canada</a></li>
    <li><a href="#">ICE OTC</a></li>
  </ul>