Navbar | Neat

The main component for handling navigation links.

Brand

Your brand might require custom styles like adjusting its size to fit into the navbar.


<header class="c-navbar">
    <a class="c-navbar__brand" href="#!">
        <img src="/img/logo.svg" alt="Neat">
    </a>
</header>

Nav

Nav is used to hold a list of navigation links of your site.
By default, it will be hidden at $breakpoint-tablet and toggled via c-navbar__nav-toggle


<header class="c-navbar u-mb-large">
    <a class="c-navbar__brand" href="#">
      <img src="/img/logo.svg" alt="Neat" title="Neat UI Kit">
    </a>
    <!-- Navigation items that will be collaped and toggled in small viewports -->
    <nav class="c-navbar__nav collapse" id="main-nav">
      <ul class="c-navbar__nav-list">
          <li class="c-navbar__nav-item">
            <a class="c-navbar__nav-link" href="#">Link 1</a>
          </li>
          <li class="c-navbar__nav-item">
            <a class="c-navbar__nav-link" href="#">Link 2</a>
          </li>
          <li class="c-navbar__nav-item">
            <a class="c-navbar__nav-link" href="#">Link 3</a>
          </li>
      </ul>
    </nav>
    <!-- // Navigation items  -->
	<button class="c-navbar__nav-toggle" type="button" data-toggle="collapse" data-target="#main-nav">
        <i class="feather icon-menu"></i>
    </button><!-- // .c-nav-toggle -->
</header>

Nav Toggle

A button to show/hide nav links on small screens.

The nav toggle is visble at $breakpoint-desktop and smaller breakpoints and is usually placed in the navbar.

<button class="c-navbar__nav-toggle" type="button" data-toggle="collapse" data-target="#main-nav">
    <i class="feather icon-menu"></i>
</button><!-- // .c-nav-toggle -->

Sub Components

Feel free to include other components like dropdown and form elements in Navbar.
Hide them at certain breakpoints using resposive utilities.
Control spacing between these components using spacing utilities.


<header class="c-navbar">
    <a class="c-navbar__brand" href="#">
      <img src="/img/logo.svg" alt="Neat" title="Neat UI Kit">
    </a>
    <!-- Navigation items that will be collaped and toggled in small viewports -->
    <nav class="c-navbar__nav collapse" id="main-nav">
      <ul class="c-navbar__nav-list">
          <li class="c-navbar__nav-item">
            <a class="c-navbar__nav-link" href="index.html">Home</a>
          </li>
          <li class="c-navbar__nav-item">
            <a class="c-navbar__nav-link" href="dashboard01.html">Dashboard</a>
          </li>
          <li class="c-navbar__nav-item">
            <a class="c-navbar__nav-link" href="pricing.html">Pricing</a>
          </li>
          <li class="c-navbar__nav-item">
            <a class="c-navbar__nav-link" href="faq.html">Faq</a>
          </li>
      </ul>
    </nav>
    <!-- // Navigation items  -->
    <div class="c-dropdown dropdown u-ml-auto">
      <div class="c-avatar c-avatar--xsmall dropdown-toggle" id="dropdownMenuAvatar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img class="c-avatar__img" src="/img/avatar.jpeg"></img>
      </div>
      <div class="c-dropdown__menu has-arrow  dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuAvatar">
        <a class="c-dropdown__item dropdown-item" href="account-settings.html">Edit Profile</a>
        <a class="c-dropdown__item dropdown-item" href="user-profile.html">View Activity</a>
        <a class="c-dropdown__item dropdown-item" href="#">Log out</a>
      </div>
    </div>
    <button class="c-navbar__nav-toggle" type="button" data-toggle="collapse" data-target="#main-nav">
        <i class="feather icon-menu"></i>
    </button><!-- // .c-navbar__nav-toggle -->
  </header>

Javascript

This component’s interactions are powered by Bootstrap collapse plugin. Refer to their collapse plugin documentation for Javascript usage.

You will notice that for certain components there is a mixture of Neat class names and Bootstrap class names that is because Bootstrap’s Javascript requires certain elements to have certain class names. Neat components does not use any of these classes for styling.