Navbar

TorqueUI is a responsive web design centric UI Framework with components made for the modern web.
 
Download TorqueUI

Navbar

The navigation of a website is very important even on small devices. For this we build the .navbar component.

The navbar is a component that is made to work across all breakpoints, from large to small, and is our most complex compontent. The navbar is build to house the navigation components you already know from the navigation components if you did not, we highly recommend you read this section first.


Note

The navbar has its own Javascript dependencies but also relies on the two Javascript plugins [dropdown](/javascript/dropdown.html) and [collapsable](/javascript/collabsable). So read up on those before continuing.

Introduction

The navbar compontents primarily consists of 3 CSS classes:

  • .navbar the main wrapper for the component.
  • .navbar-header this can contain the .navbar-brand but is the part that is visible when the navbar is collapsed.
  • .navbar-collapse this contains the main part of the navigation, the links. This part is collapsed on mobile devices.

Navbar with nav

<nav class="navbar">

  <div class="navbar-header">
    <button type="button" class="button navbar-toggle" data-toggle="collapse" data-target="navbar"><i class="fa fw fa-bars"></i></button>
  </div>

  <div class="navbar-collapse is-collapsed" data-group="navbar">
    <ul class="nav nav-default large">
      <li class="active"><a href="...">Home</a></li>
      <li><a href="...">Profile</a></li>
      <li><a href="...">Messages</a></li>
    </ul>
  </div>

</nav>

Navbar with text brand

<nav class="navbar">

  <div class="navbar-header">
    <button type="button" class="button navbar-toggle" data-toggle="collapse" data-target="navbar"><i class="fa fw fa-bars"></i></button>
    <a class="navbar-brand large" href="#">Brand</a>
  </div>

  <div class="navbar-collapse is-collapsed" data-group="navbar">
    <ul class="nav nav-default large">
      <li class="active"><a href="...">Home</a></li>
      <li><a href="...">Profile</a></li>
      <li><a href="...">Messages</a></li>
    </ul>
  </div>

</nav>

Navbar with button

<nav class="navbar">

  <div class="navbar-header">
    <button type="button" class="button navbar-toggle" data-toggle="collapse" data-target="navbar"><i class="fa fw fa-bars"></i></button>
    <a class="navbar-brand large" href="#">Brand</a>
  </div>

  <div class="navbar-collapse is-collapsed" data-group="navbar">
    <ul class="nav nav-default large">
      <li class="active"><a href="...">Home</a></li>
      <li><a href="...">Profile</a></li>
      <li><a href="...">Messages</a></li>
    </ul>
  </div>

</nav>

Navbar with form element

<nav class="navbar">

    <div class="navbar-header">
        <button type="button" class="button navbar-toggle" data-toggle="collapse" data-target="navbar"><i class="fa fw fa-bars"></i></button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="navbar-collapse is-collapsed" data-group="navbar">
        <fieldset class="form-group">
            <div class="input-group">
                <input type="text" class="form-input input-group-main" placeholder="Search">
                <span class="input-group-addon"><i class="fa fa-fw fa-search"></i></span>
            </div>
        </fieldset>
    </div>

</nav>

Navbar with form element

<nav class="navbar">

    <div class="navbar-header">
        <button type="button" class="button navbar-toggle" data-toggle="collapse" data-target="navbar"><i class="fa fw fa-bars"></i></button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>            

    <div class="navbar-collapse is-collapsed" data-group="navbar">
        <ul class="nav nav-default">
          <li class="dropdown">
            <span data-toggle="navigation" class="marker"><i class="fa fa-fw fa-caret-down"></i></span>
            <a href="...">Home</a>
            <div class="dropdown-menu">
                <div class="dropdown-container">        
                    <ul>
                        <li><a href="...">Link 1</a></li>
                        <li><a href="...">Link 2</a></li>
                        <li><a href="...">Link 3</a></li>
                        <li><a href="...">Link 4</a></li>
                        <li><a href="...">Link 5</a></li>
                    </ul>
                </div>
            </div>                    
           </li>
          <li class="active"><a href="...">Profile</a></li>
          <li><a href="...">Messages</a></li>
        </ul>
    </div>

</nav>
  • © TorqueUI