Navbar

Extras
Navbar

A navigation bar for use in Admin-like dashboards.

Usage

Add localmed-navbar.css to your <head>.
Create an <ul> list of links and icons inside a nav.vertical-navbar. See markup below.

Example
Code

Here's the Homepage

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, suscipit, labore quae molestiae explicabo modi cum delectus laudantium eius totam repellat ratione accusamus ab enim aut tempora non officia nihil!

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, iure, non natus perspiciatis vel optio ullam reiciendis alias cumque repellat praesentium iste id eaque quae ipsum temporibus quidem adipisci itaque!

<nav class="vertical-navbar">
  <ul>
    <li>
      <a href="/" class="is-active">
        <i class="icon-house"></i> <span>Home</span>
      </a>
    </li>
    <li class="divider"></li>
    <!-- ... -->
  </ul>
</nav>

Orientation

Use .horizontal-navbar instead for a horizontal orientation. Also notice, the divider requires some content ( ) to expand to full height.

Example
Code

Here's the Homepage

Lorem ipsum

<nav class="horizontal-navbar">
  <ul>
    <li>
      <a href="/" class="is-active">
        <i class="icon-house"></i> <span>Home</span>
      </a>
    </li>
    <li class="divider">&nbsp;</li>
    <!-- ... -->
  </ul>
</nav>

Colors

Add .blue-navbar for a blue navbar.

Example
Code

Here's the Homepage

Lorem ipsum

<nav class="horizontal-navbar">
  <ul>
    <li>
      <a href="/" class="is-active">
        <i class="icon-house"></i> <span>Home</span>
      </a>
    </li>
    <li class="divider"></li>
    <!-- ... -->
  </ul>
</nav>

Alignment

There are quire a few alignment options, depending on the orientation.

Horizontal Orientation

.center-navbar - Horizontally centers the navigation items.
.righ-navbar - Aligns the navigation items to the right.
.bottom-navbar - Moves the arrow to the top of the navbar

Vertical Orientation

.right-navbar - Moves the arrow to the left of the navbar.

Example
Code

Here's the Homepage

Lorem ipsum

<nav class="horizontal-navbar">
  <ul>
    <li>
      <a href="/" class="is-active">
        <i class="icon-house"></i> <span>Home</span>
      </a>
    </li>
    <li class="divider"></li>
    <!-- ... -->
  </ul>
</nav>

Styleguides

Shared Assets & Docs

Usage

Here's the Homepage

Lorem ipsum

Orientation

Here's the Homepage

Lorem ipsum

Colors

Here's the Homepage

Lorem ipsum

Alignment

Horizontal Orientation

Vertical Orientation

Here's the Homepage

Lorem ipsum