Lesson 16 - Bootstrap - Navigation bar

In the previous lesson, Bootstrap - Navigation, we learned how to style the navigation, including tabs. We'll use this knowledge in today's tutorial to create a navigation bar. We're continuing the Bootstrap CSS framework course.

Navigation bar

Navbar is one of the most important Bootstrap components and at the same time a part of most layouts. It's a responsive navigation bar which can contain many different elements and which "shrinks" on mobile devices into a single "hamburger" button opening a vertical menu. Except for the navigation, the bar often contains the logo, forms (e.g. searching on the website), texts, and buttons for displaying other contents.

Example

As always, let's showcase almost everything the component can do in this one example and then describe the individual parts in detail. For correct functionality of the hamburger menu and dropdowns, don't forget to link the Bootstrap's JavaScript plugin.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="https://www.ict.social/images/1/css/bootstrap/twitter.png"  class="d-inline-block align-top" width="32" height="32" alt="Twitter" />
        shop.com
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar-content" aria-controls="navigation-bar-content" aria-expanded="false" aria-label="Open navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navigation-bar-content">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">About the company <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="products-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Products
                </a>
                <div class="dropdown-menu" aria-labelledby="products-dropdown">
                    <a class="dropdown-item" href="#">Hobby</a>
                    <a class="dropdown-item" href="#">Kitchen</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Garden</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Pricing</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <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>
    </div>
</nav>

The result:

Now, let's describe the code.

Navigation bar

First things first. Of course, we create the navigation bar using the <nav> element with the .navbar class. To achieve a responsive design we add e.g. the .navbar-expand-lg class which causes a vertical menu to display instead of the navigation bar on devices smaller than large. In the example above, the .navbar-expand-md class is used for the purposes of this article. We have already mentioned breakpoints, specifying dimensions of the device types, in the lesson Bootstrap - Typography. Notice that the responsive menu is created using Collapse.

Logo

We place the logo inside a link with the .navbar-brand class. If we put an image inside the link as well, it's also necessary to specify its size and the vertical align using utility classes.

Responsive button

The next item we usually add is a button visible only on mobile devices, used for opening the vertical menu. It's a <button> element with the .navbar-toggler class and the data-toggle="collapse" data attribute. As data-target we provide the selector for the element representing the other content of the navigation which should be inside the dropdown menu instead of the navigation bar. On larger screens this content will be rendered directly in the navigation bar. This element follows as <div>.

If there's too little elements and we want to distribute the space between them equally, we can assign the following classes to the navigation: navbar navbar-light bg-light justify-content-between.

Navigation's content

We place the individual parts of the navigation as the <ul> list items with the .navbar-nav class. The list stretches to fill the whole width. The mr-auto class sets the right margin to the auto value. We have already tried to use the navigation items in the lesson Bootstrap - Navigation. We should also assign the .active class to the to link to the current page.

Inline form

The last thing, inline form, shouldn't be uncharted waters for you either. Everything we've shown in the comprehensive two-part lesson about forms can be applied here as well. If we placed multiple form components of different sizes one after another, we'd assign the .align-middle class to them in order to center them.

Similarly to the navigation component, the navigation in a navigation bar can be also rewritten in a way that only the <a> elements would be used and the <ul> list could be omitted. However, we wouldn't be able to use Dropdown buttons in such navigation.

Text

We can place any text inside a navbar as the <span> element with the navbar-text class. The text centers vertically by that.

Navigation bars will hide when we decide to print the website. If we wanted the navigation bar to be a part of the printed result, we'd assign the d.print class to it.

Colors

The navigation bar comes in both light and dark versions, depending on our selection we assign the .navbar-light or .navbar-dark class. These classes style the button and the text color. Then, we set the color of the bar itself using a class from background utilities.

Of course, we can set a completely custom background color to the navigation bar as well using a custom class or an inline style.

Positioning

We can use position utilities to position the navigation bar. We're particularly interested in:

• Fixed position, when the navigation bar doesn't scroll along the page but stays fixed in the same position. We can achieve this behavior by assigning the .fixed-top or .fixed-bottom class, depending on whether we want the bar to be sticked to the top or bottom side of the page. This functionally is used by relatively large amount of websites and allows the user to use the navigation bar anywhere on the page without having to scroll the page up.
• Sticky position is a very interesting innovation, but be careful, it works in new browsers only (requires the support for the position: sticky property and value in CSS). The navigation works as a regular element but as soon as we start scrolling, it sticks as if the position is fixed. The benefit of this solution is that we can place e.g. a large logo above the navigation which will scroll along the page while the navigation will stick to the top. The logo doesn't take any space this way and the navigation is still at close hand. We assign the .sticky-top class to the navigation bar to achieve this behavior .

In the next lesson, Bootstrap - Pagination, Alerts, and Breadcrumbs, we'll describe several other components: Pagination, Alerts, and Breadcrumb.