A basic navigation bar consists of the website logo or brand name, navigation menu, and options for toggling behavior on smaller devices. A basic Bootstrap navigation bar might look similar to this:

The preceding navigation bar consists of an <a> element containing the site logo, with a class name of .navbar-brand. It also contains a <ul> element, whose class name is set to .nav navbar-nav. Each <li> child element's class name is set to .nav-item. The full HTML markup required to create the navigation bar is listed here:

<nav class="navbar navbar-full navbar-dark bg-primary"> 
    <a class="navbar-brand" href="#"> 
        <img src="~/img/bootstraplogo.png" alt="Logo"/> 
    </a> 
    <ul class="nav navbar-nav"> 
        <li class="nav-item active"> 
            <a class="nav-link" asp-controller="Home"
             asp-action="Index">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> 
</nav> 

Bootstrap uses the Collapse library to allow navigation bars to be responsive on smaller devices. You may have noticed a hamburger menu that hides the menu item that is normally visible when visiting most modern websites from your mobile device:

In order to achieve the desired menu illustrated in the previous screenshot, you'll need to change the navbar markup to the following:

 
<nav class="navbar navbar-full navbar-dark bg-primary"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navCollapse"> 
        ☰ 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="navCollapse"> 
        <a class="navbar-brand" href="#"> 
            <img src="~/img/bootstraplogo.png" alt="Logo" /> 
        </a> 
        <ul class="nav navbar-nav"> 
            <li class="nav-item active"> 
                <a class="nav-link" asp-controller="Home" 
                 asp-action="Index">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> 
 

As highlighted in the preceding code, and in order to show a button that will toggle the navigation bar items when collapsed, a <button> element was added with a class name of .navbar-toggler hidden-sm-up.

Note that the icon displayed on the button is a Font Awesome icon, and will only work if you've added Font Awesome to your project as explained in Chapter 1, Getting started with ASP.NET Core and Bootstrap 4.

The rest of the menu items are wrapped inside a <div> element with a class name of .collapse navbar-toggleable-xs.

By combining the .navbar-toggler and .navbar-toggleable-* class names you can specify on which device sizes the content is meant to be shown.

In many instances, you would like to display additional child menus under the main menu items. For example, in the following screenshot, we display a list of product categories as child menus of the Product menu:

The preceding navigation bar is created with the same markup as the first nav bar, but the Products menu item's class name is changed to .nav item dropdown and the <a> element inside the <li> element receives a class name of . nav-link dropdown-toggle. The HTML markup for the Products menu item is as follows:

<li class="nav-item dropdown"> 
    <a class="nav-link dropdown-toggle" data-toggle="dropdown"  href="#" role="button" 
       aria-haspopup="true" aria-expanded="false"> 
        Products 
    </a> 
    <div class="dropdown-menu" aria-labelledby="Products"> 
        <a class="dropdown-item" href="#">Beverages</a> 
        <a class="dropdown-item" href="#">Condiments</a> 
        <a class="dropdown-item" href="#">Seafood</a> 
    </div> 
</li> 

Bootstrap 4 allows you to theme the navbar with a simple combination of the .navbar-* and .bg-* class names of the <nav> element. For example, in the following screenshot, we created two navigation bars, one with a blue and the other with a red background:

The preceding navbar colors are achieved by adding .bg-primary or .bg-danger to the navbar <nav> element.

<nav class="navbar navbar-dark bg-primary"> 
<nav class="navbar navbar-light bg-danger">  

You can also apply a custom color to a navbar by setting the background-color CSS attribute. For example, the following screenshot was achieved by using the following HTML markup:

<nav class="navbar navbar-light bg-inverse" style="background-color: #8361B7;"> 

Bootstrap provide four basic color styles that you can use to style the navbar: