Bootstrap 4 Navigation Bar

 in Bootstrap  tagged dropdown / navigation / toggle / Bootstrap / hamburger / link / navbar / nav / nav-item / brand / item / Bootstrap 4 by
This entry is part 2 of 1 in the series Bootstrap 4

Bootstrap 4
  • Bootstrap 4 Navigation Bar

This post is based on articles at w3schools.com, starting with the article called BS4 Navs. The HTML <nav> defines a set of navigation links. Not all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether or not to omit the initial rendering of this content. In other words, use the <nav> tags in your code whenever you have a navigation bar.

Boostrap 4 Navigation Bar

A navigation bar is a navigation header that is placed at or near the top of the page. The article called BS4 NavBar at w3schools.com goes through several examples.

  1. Basic Navbar
  2. Vertical Navbar
  3. Centered Navbar
  4. Colored Navbar
  5. Brand / Logo
  6. Collapsing The Navigation Bar
  7. Navbar With Dropdown
  8. Navbar Forms and Buttons
  9. Navbar Text
  10. Fixed Navigation Bar
  11. Bottom Fixed Navbar
  12. Sticky Navbar

Start Simple

You can have a look at all of the types of navigation bars, but if you are undecided, start simple and choose a common format. If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links.

Basic NavBar

w3schools says: “With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens). To add links inside the navbar, use a <ul> element with class=”navbar-nav“. Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class”.

Here is their code. Every example listed above starts with nav class=”navbar 

<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

Here is a screenshot of what the above code looks like.

Nav Brand

Let’s work on a more typical navigation bar. 

<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand" href="#">CompanyName</a>
        </nav>
    </div>
</body>

We can replace the “CompanyName” with an actual graphic like this. 

<a class="navbar-brand" href="#">
     <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>

Now let’s add some links and have a logo and the compny name on the left side. We have surrounded the navigation with a div container, although this is not required. 

<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">
           <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
        </a>
        <a class="navbar-brand" href="#">CompanyName</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav ml-auto">
              <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#">About</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
           </ul>
        </div>
     </nav>
</div>
</body>

Here is what that looks like.

Dropdown

Suppose we want to have a dropdown for Products. 

<li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" >Products</a>
 <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Product 1</a>
    <a class="dropdown-item" href="#">Product 2</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Product 3</a>
 </div>
</li>

This is what we get.

Hamburger Menu

On smaller viewports, we want to have the menu items on the right side to appear when the user clicks the menu icon. How do we add that? Right after our a element with the “CompanyName” displayed, add the following code. The id should be the same as the following line of code with the id of “navbarSupportedContent”. 

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
   <span class="navbar-toggler-icon"></span> 
</button>

Complete Listing

Here is our complete code listing from the video on YouTube. If this is too much code, please go to our next post where we’ve simplified the code so it will be easier for you to cut and paste the code and later modify it to your own needs. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example by Coursetro.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">
           <img src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
        </a>
        <a class="navbar-brand" href="#">CompanyName</a>
        
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
           <span class="navbar-toggler-icon"></span> 
        </button>
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav ml-auto">
              <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" >Products</a>
                 <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Product 1</a>
                    <a class="dropdown-item" href="#">Product 2</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Product 3</a>
                 </div>
                </li>
              <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
           </ul>
        </div>
     </nav>
</div>
</body>
</html>