Navbar#

Navbar is a layout container that appears in the header of apps and websites.

The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section class will be evenly distributed in the container. Add a active class to links to make them active.

<header class="navbar">
  <section class="navbar-section">
    <a href="..." class="navbar-brand">RideStyler</a>
  </section>
  <section class="navbar-section">
    <a href="..." >Wheels</a>
    <a href="..." class="active">Tires</a>
  </section>
  <section class="navbar-section">
    <span class="dropdown dropdown-right">
      <button class="link dropdown-toggle">Wheel Co. <i class="icon icon-caret-down"></i></button>
      <ul class="menu">
        ...
      </ul>
    </span>
  </section>
</header>

Branded#

You can use the branded navbar menu component to quickly add a customizable dropdown menu. Add a branded-navbar-menu element inside of the DOM and add any available settings as a prop. if you haven't any availble settings the component will make all the necessary calls, just be sure you have the ridestyler api included on your page. Checkout out the Javascript page for more information on how to setup a custom component.

<div class="navbar navbar-branded">
  <div class="navbar-brand">
    <div class="navbar-brand-logo"></div>
    <i class="icon icon-car"></i>
  </div>
  <section class="navbar-section">
    <h1>Calculators</h1>
  </section>
  <branded-navbar-menu />
</div>

Centered#

You can use navbar-center class to have a centered section.

<header class="navbar">
  <section class="navbar-section">
    <a href="#">Docs</a>
    <a href="#">Examples</a>
  </section>
  <section class="navbar-center">
    <!-- centered logo or brand -->
  </section>
  <section class="navbar-section">
    <a href="#">Twitter</a>
    <a href="#">GitHub</a>
  </section>
</header>