Navs - Flex UI Library

Navs

Navbar

Nav

<!-- This <ul> markup is required. -->
<ul class="c-nav" data-flexmls="nav-tabs">
  <!-- Nav items require format of <li> <a> title </a> </li> -->
  <li> <a data-target="#"> Nav Item 1 </a> </li>
  <li> <a data-target="#"> Nav Item 2 </a> </li>
  <li> <a data-target="#"> Nav Item 3 </a> </li>
  <li> <a data-target="#"> Nav Item 4 </a> </li>
  <li> <a data-target="#"> Nav Item 5 </a> </li>
  <li> <a data-target="#"> Nav Item 6 </a> </li>
  <li> <a data-target="#"> Nav Item 7 </a> </li>
  <li> <a data-target="#"> Nav Item 8 </a> </li>
  <li> <a data-target="#"> Nav Item 9 </a> </li>
  <li> <a data-target="#"> Nav Item 10 </a> </li>
  <li> <a data-target="#"> Nav Item 11 </a> </li>
  <li> <a data-target="#"> Nav Item 12 </a> </li>
  <li> <a data-target="#"> Nav Item 13 </a> </li>
  <li> <a data-target="#"> Nav Item 14 </a> </li>
  <li> <a data-target="#"> Nav Item 15 </a> </li>
  <li> <a data-target="#"> Nav Item 16 </a> </li>
  <li> <a data-target="#"> Nav Item 17 </a> </li>
  <li> <a data-target="#"> Nav Item 18 </a> </li>
  <li> <a data-target="#"> Nav Item 19 </a> </li>
  <li> <a data-target="#"> Nav Item 20 </a> </li>

  <!-- Required for "More" overflow menu. -->
  <li class="dropdown">
    <a class="c-nav-item--more" data-toggle="dropdown" data-target="#">
      More <span class="flexicon flexicon-90 flexicon-chevron--small"></span>
    </a>
    <ul class="dropdown-menu"> </ul>
  </li>
</ul>

Implementation Notes

Use the Code Sample to create the required markup.
JavaScript code is automatically attached to the component. There is no need to make a separate call except in the following situation.
If the contents of the nav items change, call
$('[data-flexmls=nav-tabs]').tab('refresh').

Nav Tabs

Contact Details

Searches/Subscriptions

Portal

Calendar

Messages

Forms

Notes

Listing Notes

Links

<!-- Add the .c-nav-tabs class. -->
<ul class="c-nav c-nav-tabs" data-flexmls="nav-tabs">
  <!-- Add the standard Bootstrap data attributes. -->
  <li class="active"> <a data-toggle="tab" data-target="#details"> Contact Details </a> </li>
  <li> <a data-toggle="tab" data-target="#searches"> Searches/Subscriptions </a> </li>
  <li> <a data-toggle="tab" data-target="#portal"> Portal </a> </li>
  <li> <a data-toggle="tab" data-target="#calendar"> Calendar </a> </li>
  <li> <a data-toggle="tab" data-target="#messages"> Messages </a> </li>
  <li> <a data-toggle="tab" data-target="#forms"> Forms </a> </li>
  <li> <a data-toggle="tab" data-target="#notes"> Notes </a> </li>
  <li> <a data-toggle="tab" data-target="#listingNotes"> Listing Notes </a> </li>
  <li> <a data-toggle="tab" data-target="#links"> Links </a> </li>

  <li class="dropdown">
    <a class="c-nav-item--more" data-toggle="dropdown" data-target="#">
      More <span class="flexicon flexicon-90 flexicon-chevron--small"></span>
    </a>
    <ul class="dropdown-menu"> </ul>
  </li>
</ul>

<!-- These are standard Bootstrap tabs with an extra class to theme the area. -->
<div class="tab-content c-nav-tabs__content">
  <div class="tab-pane active" id="details"> Contact Details </div>
  <div class="tab-pane" id="searches"> Searches/Subscriptions </div>
  <div class="tab-pane" id="portal"> Portal </div>
  <div class="tab-pane" id="calendar"> Calendar </div>
  <div class="tab-pane" id="messages"> Messages </div>
  <div class="tab-pane" id="forms"> Forms </div>
  <div class="tab-pane" id="notes"> Notes </div>
  <div class="tab-pane" id="listingNotes"> Listing Notes </div>
  <div class="tab-pane" id="links"> Links </div>
</div>

Implementation Notes

Use the Code Sample to create the required markup.
If the contents of the nav items change, call
$('[data-flexmls=nav-tabs]').tab('refresh').

Nav Tabs - No More

Example without overflow menu.

Contact Details

Searches/Subscriptions

Portal

<!-- Add the .c-nav-tabs class. -->
<ul class="c-nav c-nav-tabs">
  <!-- Add the standard Bootstrap data attributes. -->
  <li class="active"> <a data-toggle="tab" data-target="#detailsNoMore"> Contact Details </a> </li>
  <li> <a data-toggle="tab" data-target="#searchesNoMore"> Searches/Subscriptions </a> </li>
  <li> <a data-toggle="tab" data-target="#portalNoMore"> Portal </a> </li>
</ul>

<!-- These are standard Bootstrap tabs with an extra class to theme the area. -->
<div class="tab-content c-nav-tabs__content">
  <div class="tab-pane active" id="detailsNoMore"> Contact Details </div>
  <div class="tab-pane" id="searchesNoMore"> Searches/Subscriptions </div>
  <div class="tab-pane" id="portalNoMore"> Portal </div>
</div>

Nav Lists

Standard

Nav List Item (1)

Nav List Item (2)

Nav List Item (3)

<div class="c-container--canvas">
  <div class="c-card">
    <a href="#" class="c-nav-list__item">
      <div class="c-item__title"> Nav List Item (1) </div>
      <div class="flexicon flexicon-chevron"></div>
    </a>

    <a href="#" class="c-nav-list__item">
      <div class="c-item__title"> Nav List Item (2) </div>
      <div class="flexicon flexicon-chevron"></div>
    </a>

    <a href="#" class="c-nav-list__item">
      <div class="c-item__title"> Nav List Item (3) </div>
      <div class="flexicon flexicon-chevron"></div>
    </a>
  </div>
</div>

Icons

Recent

Saved

<div class="c-container--canvas">
  <div class="c-card c-list--icons">
    <a href="#" class="c-nav-list__item">
      <div class="flexicon flexicon-clock"></div>
      <div class="c-item__title"> Recent </div>
      <div class="flexicon flexicon-chevron"></div>
    </a>

    <a href="#" class="c-nav-list__item">
      <div class="flexicon flexicon-star"></div>
      <div class="c-item__title"> Saved </div>
      <div class="flexicon flexicon-chevron"></div>
    </a>
  </div>
</div>

Avatars

McArthur Parker

Troy McClure

Mr. Plow

<div class="c-container--canvas">
  <div class="c-card c-list--avatars">
    <a href="#" class="c-nav-list__item">
      <div class="c-avatar c-avatar--small">
        <div> MP </div>
      </div>
      <div class="c-item__title"> McArthur Parker </div>
      <div class="flexicon flexicon-chevron"></div>
    </a>
    <a href="#" class="c-nav-list__item">
      <div class="c-avatar c-avatar--small">
        <div> TM </div>
      </div>
      <div class="c-item__title"> Troy McClure </div>
      <div class="flexicon flexicon-chevron"></div>
    </a>
    <a href="#" class="c-nav-list__item">
      <div class="c-avatar c-avatar--small">
        <div> MP </div>
      </div>
      <div class="c-item__title"> Mr. Plow </div>
      <div class="flexicon flexicon-chevron"></div>
    </a>
  </div>
</div>

Nav Pill

Red Green Blue

<div class="c-container--canvas">

  <div id="basicNavPill" class="c-nav-pill">
    <a class="c-nav-pill-btn" data-active="true">Red</a>
    <a class="c-nav-pill-btn">Green</a>
    <a class="c-nav-pill-btn">Blue</a>
  </div>
</div>

<script>
  $(function() {
    new NavPill('#basicNavPill');
  })
</script>

You can control this programatically by calling the select function. This button has an event listner set up to select "Red" when clicked.

Red Green Blue

<div class="c-container--canvas">

  <div id="fancyNavPill" class="c-nav-pill">
    <a id="red" class="c-nav-pill-btn" data-active="true">Red</a>
    <a class="c-nav-pill-btn">Green</a>
    <a class="c-nav-pill-btn">Blue</a>
  </div>
  &nbsp;
  <button id='test' class="btn btn-sm btn-primary">Select Red</button>
</div>

<script>
  $(function() {
    var np = new NavPill('#fancyNavPill');

    $('#test').click(function() {
      np.select($('#red'));
    })
  })
</script>