1. Docs
  2. Components
  3. Navbar
Buy Now Contact

Navbar

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="Dashboard's Logo">
    </a>
</header>

  • 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-nav-toggle

<header class="c-navbar">
	<a class="c-navbar__brand" href="#!">
        <img src="/img/logo.svg" alt="Dashboard's Logo">
    </a>
	<!-- Navigation items that will be collapes and toggle in small viewports -->
	<nav class="c-nav collapse" id="main-nav">
	    <ul class="c-nav__list">
	        <li class="c-nav__item">
	            <a class="c-nav__link" href="#!">Events</a>
	        </li>
	        <li class="c-nav__item">
	            <a class="c-nav__link" href="#!">Browse</a>
	        </li>
	        <li class="c-nav__item">
	            <a class="c-nav__link" href="#!">Your Ticket</a>
	        </li>
	    </ul>
	</nav>
	<!-- // Navigation items  -->
	<button class="c-nav-toggle" type="button" data-toggle="collapse" data-target="#main-nav">
	    <span class="c-nav-toggle__bar"></span>
	    <span class="c-nav-toggle__bar"></span>
	    <span class="c-nav-toggle__bar"></span>
	</button>
</header>

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-nav-toggle" data-toggle="collapse" data-target="#main-nav">
    <span class="c-nav-toggle__bar"></span>
    <span class="c-nav-toggle__bar"></span>
    <span class="c-nav-toggle__bar"></span>
</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="Dashboard's Logo">
    </a>
	<!-- Navigation items that will be collapes and toggle in small viewports -->
	<nav class="c-nav collapse" id="main-nav">
	    <ul class="c-nav__list">
	        <li class="c-nav__item">
	            <a class="c-nav__link" href="#!">Events</a>
	        </li>
	        <li class="c-nav__item">
	            <a class="c-nav__link" href="#!">Browse</a>
	        </li>
	        <li class="c-nav__item">
	            <a class="c-nav__link" href="#!">Your Ticket</a>
	        </li>
	        <li class="c-nav__item">
	            <a class="c-nav__link" href="#!">
	            <div class="c-field has-icon-right u-hidden-up@mobile">
	                <span class="c-field__icon">
	                    <i class="fa fa-search"></i>
	                </span>
	                <label class="u-hidden-visually" for="navbar-search">Seach</label>
	                <input class="c-input" id="navbar-search" type="text" placeholder="Search">
	            </div>
	            </a>
	        </li>
	    </ul>
	</nav>
	<!-- // Navigation items  -->
	<div class="c-field has-icon-right c-navbar__search u-ml-auto u-hidden@mobile">
	    <span class="c-field__icon">
	        <i class="fa fa-search"></i>
	    </span>
	    <label class="u-hidden-visually" for="navbar-search">Seach</label>
	    <input class="c-input" id="navbar-search" type="text" placeholder="Search">
	</div>
	<button class="c-nav-toggle" type="button" data-toggle="collapse" data-target="#main-nav">
	    <span class="c-nav-toggle__bar"></span>
	    <span class="c-nav-toggle__bar"></span>
	    <span class="c-nav-toggle__bar"></span>
	</button>
</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 Dashboard class names and Bootstrap class names like: .collapse and that’s because Bootstrap’s Javascript requires certain elements to have certain class names. Dashboard components does not use any of these classes for styling.