Nav#

Add a container element with the nav class. And add child elements with the nav-item class. The nav-item with the active class will be highlighted.

<ul class="nav">
  <li class="nav-item">
    <a href="#">Elements</a>
  </li>
  <li class="nav-item active">
    <a href="#">Layout</a>
    <ul class="nav">
      <li class="nav-item">
        <a href="#">Flexbox grid</a>
      </li>
      <li class="nav-item">
        <a href="#">Responsive</a>
      </li>
      <li class="nav-item">
        <a href="#">Navbar</a>
      </li>
      <li class="nav-item">
        <a href="#">Empty states</a>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a href="#">Components</a>
  </li>
  <li class="nav-item">
    <a href="#">Utilities</a>
  </li>
</ul>

BrandedNavColumn#

You can use the BrandedNavColumn component to quickly give your app a RideStyler branded navigation system. Instead of wrapping your nav-items in a nav, wrap them inside of the BrandedNavColumn element and add any available nav-items. You can add inner-navigation systems as well, just add a template wrapper with the prop v-slot:inner and place your nav-items inside. Lastly you can place items in the footer of your nav by placing them in a template wrapper with the prop v-slot:footer.

<!-- BrandedNavColumn component example -->
<branded-nav-column :currentRoute="window.location.href" :helpLinksEnabled="false" homeLink="/">
  <li class="nav-item">
    <a href="#">Elements</a>
  </li>
  <li class="nav-item active">
    <a href="#" id="nav-toggle">Layout</a>
    <ToggleNav toggleSelector="#nav-toggle">
      <li class="nav-item">
        <a href="#">Flexbox grid</a>
      </li>
      <li class="nav-item">
        <a href="#">Responsive</a>
      </li>
      <li class="nav-item">
        <a href="#">Navbar</a>
      </li>
      <li class="nav-item">
        <a href="#">Empty states</a>
      </li>
    </ToggleNav>
  </li>
  <template v-slot:inner>
    <li class="nav-item">
      <a href="#">Components</a>
    </li>
  </template>
  <template v-slot:footer>
    <li class="nav-item">
      <a href="#">Utilities</a>
    </li>
  </template>
</branded-nav-column>

props

• helpLinksEnabled - true or false depending on if you want help/support links available in your nav
• currentRoute - the current path at which your browser is located. This will trigger the nav to close on mobile screens when updated
• homeLink - the path of your home page. This will be used when clicking the logo at the top of the nav

ToggleNav#

You can use the ToggleNav component to quickly hide and show inner nav-items. instead of wrapping your nav-items in a nav, wrap them in a ToggleNav element and add any available nav-items. Lastly, add a selector to your toggle switch element and add the selector to your ToggleNav element as a toggleSelector prop to initiate your toggle switch.

<!-- ToggleNav component example -->
<ul class="nav">
  <li class="nav-item">
    <a href="#">Elements</a>
  </li>
  <li class="nav-item active">
    <a href="#" id="nav-toggle">Layout</a>
    <toggle-nav toggleSelector="#nav-toggle">
      <li class="nav-item">
        <a href="#">Flexbox grid</a>
      </li>
      <li class="nav-item">
        <a href="#">Responsive</a>
      </li>
      <li class="nav-item">
        <a href="#">Navbar</a>
      </li>
      <li class="nav-item">
        <a href="#">Empty states</a>
      </li>
    </toggle-nav>
  </li>
  <li class="nav-item">
    <a href="#">Components</a>
  </li>
  <li class="nav-item">
    <a href="#">Utilities</a>
  </li>
</ul>

props

• toggleSelector - the id or class selector on the element you want used as the toggle switch.

Checkout out the Javascript page for more information on how to setup a custom component.