How to Create Navigation Bar using Bootstrap

To start with, navbars require three things - a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes. You can use spacing and flex utility classes for controlling spacing and alignment within navbars.

images/coding/coding03.webp

For accessibility, either use a <nav> element or, if you are using a more generic element such as a <div>, add a role="navigation" to every navbar to clearly identify it as a navigation.

For example, a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Color Schemes

Use combination of theming classes and background-color utilities.

  1. .navbar-light for use with light background colors
  2. .navbar-dark for use with dark background colors

Then, customize with .bg-* utilities.

  1. bg-light
  2. bg-dark
  3. bg-primary
  4. style="background-color: #e3f2fd;"

Content in Navbar

A navbar can have following content:

  1. .navbar-brand for company, product, project or any other brand name.
  2. .navbar-nav for a full-height and lightweight navigation (including drop downs).
  3. .navbar-toggler for use with collapse plugin and other navigation toggling behaviors.
  4. .form-inline for any form controls and actions.
  5. .navbar-text for adding vertically centered strings of text.

1. Brand

Use it as an anchor element. For example,

<a class="navbar-brand" href="#">Navbar</a>

2. Nav

You can use it as list items. For example,

<ul class="navbar-nav">
 <li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
 <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
 <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
 <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
 </li>
</ul>

There are three classes applied - one each at <ul> tag, <li> tag and <a> tag:

  1. .navbar-nav at <ul> tag
  2. .nav-item at <li> tag, active is used for current item, dropdown is used for drop downs
  3. .nav-link at <a> tag

You can also avoid the list-based approach and use div instead of ul.

3. Dropdown Navigation

Add .dropdown class to <li> tag to enable drop down navigation. For example,

<li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown link
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>

4. Forms

Place various form controls and components within a navbar with .form-inline. For example,

<form class="form-inline">
 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

5. Text

Navbars can contain some text with the help of .navbar-text class. This class adjusts vertical alignment and horizontal spacing for strings of text. For example,

<span class="navbar-text">
 Navbar text with an inline element
</span>

Placement of Navbar

Add the necessary class to the <nav> element. You can choose from fixed to the top, fixed to the bottom, or stickied to the top:

  1. .fixed-top
  2. .fixed-bottom
  3. sticky-top

Responsive Navbar

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

1. Navbar Toggler

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>

2. Navbar Collapse

<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
...
...
</div>

The .collapse class indicates a collapsible element, the content that will be shown or hidden with a click of a button. To control the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then, add the data-target="#id" attribute to connect the button with the collapsible content.