Components

Nav Bars

Navbars are really simple and don't require many extra classes to be added, if at all. We'll start with a simple navbar, which only needs a few plain elements to do:

<header>
  <nav>
    <ul>
      <li><a href="/">PageCSS</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

As you can see, you can just use plain elements with no classes added anywhere. And did you notice that first item in the list is slighty bigger? That's because we wrapped it all in a <header>, so that would go at the top of the page quite easily. Here's the same nav without the header. This would make sense somewhere in the middle of the page. Note how it's also slightly shorter than the above with a slightly smaller font.

<nav>
  <ul>
    <li><a href="/"><i class="fa fa-home"></i> PageCSS</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class="u-right"><span>By AppsAttic</span></li>
  </ul>
</nav>

Yes, you can use FontAwesome icons too. Just do the standard <i class="fa fa-home"></> as in the example above

NavBar with a Right Hand List

Here's a navbar with a right hand list. It's just one extra class needed. Also note how you don't have to do anything extra if you just want plain text rather than a link in each item, just use <span> instead of <a>.

<nav>
  <ul>
    <li><a href="/">PageCSS</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class="u-right"><a href="#login">Login</a></li>
    <li class="u-right"><span>Welcome</span></li>
  </ul>
</nav>

And a .inverse version too. Just put it on the nav such as <nav class="inverse">.

<nav class="inverse">
  <ul>
    <li><a href="/">PageCSS</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class="u-right"><a href="#login">Login</a></li>
    <li class="u-right"><span>Welcome</span></li>
  </ul>
</nav>

(Ends)