Bootstrap Navigation Bar

A well-designed navigation bar is crucial for any website, as it ensures users can easily explore your site. With Bootstrap Navigation Bars, you can build responsive, sleek, and functional menus with minimal effort.

At TheCodingCollege.com, our goal is to simplify web development for you. This tutorial will walk you through creating and customizing a Bootstrap Navigation Bar for your projects.

What is a Bootstrap Navigation Bar?

The Bootstrap Navigation Bar (or Navbar) is a flexible and responsive component for building website menus. It supports features like branding, links, dropdowns, forms, and buttons while adapting seamlessly to any screen size.

Basic Structure of a Bootstrap Navigation Bar

Below is the basic syntax of a Bootstrap Navbar:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand/logo -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Links -->
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Key Components Explained

  1. navbar: The main class that defines the navigation bar.
  2. navbar-default: Provides a light, standard styling for the navbar.
  3. navbar-header: Contains the branding/logo area.
  4. navbar-nav: Used to style navigation links.
  5. active: Highlights the current page.

Adding Responsiveness to the Navigation Bar

To make the Navbar responsive, you need to include a hamburger menu that toggles the menu on smaller screens. Here’s how you can do it:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand/logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Links -->
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Explanation of the Responsive Navbar:

  1. navbar-toggle: Adds the hamburger menu button.
  2. collapse navbar-collapse: Collapses the menu links into a togglable section.
  3. icon-bar: Styles each line of the hamburger menu.

Adding Dropdown Menus to the Navbar

Dropdown menus allow for more complex navigation.

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services
                <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">SEO</a></li>
                    <li><a href="#">Marketing</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Key Features:

  • dropdown: Wraps the dropdown menu.
  • dropdown-toggle: Toggles the visibility of the dropdown menu.
  • dropdown-menu: Contains the list of dropdown items.

Styling and Customizing the Navbar

You can modify the appearance of the Navbar using CSS or Bootstrap classes.

1. Dark Navbar:

Switch to a darker theme with navbar-inverse.

<nav class="navbar navbar-inverse">
    ...
</nav>

2. Add a Search Form:

<form class="navbar-form navbar-left" action="/action_page.php">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

3. Add Buttons to Navbar:

<ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>

Full Example: A Complete Navbar

Here’s a full example combining all the features discussed:

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand/logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">MyWebsite</a>
        </div>

        <!-- Links -->
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">SEO</a></li>
                        <li><a href="#">Marketing</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul>
        </div>
    </div>
</nav>

Best Practices for Using Bootstrap Navigation Bars

  1. Mobile-First Design: Ensure the Navbar is responsive and user-friendly on smaller devices.
  2. Optimize for Accessibility: Use ARIA attributes like aria-expanded and aria-controls for better accessibility.
  3. Clear Navigation: Use meaningful labels and organize links logically.
  4. Combine with Branding: Include a logo or brand name in the Navbar for a professional look.

Conclusion

The Bootstrap Navigation Bar is an essential tool for creating modern, responsive menus for your website. Whether you’re a beginner or an experienced developer, the Navbar’s flexibility and ease of use make it indispensable.

Leave a Comment