What is Bootstrap 4 navbar menu component

The navbar component of Bootstrap 4 is used to create header navigation on your website. The navbar header menu may contain a brand logo, navigation links to the main parts of the website, dropdown menus, inline forms etc. The navbar is fully responsive that adjust to the user’s screen by using built-in classes.

navbar colors example fixed top custom colors fixed bottom sticky

The Bootstrap 4 also has built-in classes for creating the navbar that is fixed on top or bottom. There is also a class for creating a sticky menu as using navbar component.

I will show you all these examples along with coloring and customizing the navbar in this tutorial, so keep reading below.

A navbar example with different sub-components

Let me start with a navbar example that contains different elements. This navbar example includes a brand text, a few links and a dropdown menu with inner links. Besides, an inline form is also used for searching the website. Have a look at the output and complete code.

I will recommend you copy the complete code of all examples in your IDE and run it locally to see how it looks.

See online demo and code

The markup for this demo:

Note: As this menu uses a dropdown menu, it also requires you referring the Bootstrap JS file along with jQuery.

The same menu will look like this on the smaller devices (smart phones etc.):

So, the navbar is created by using the <nav> tag where .navbar class is assigned. There, the .navbar-light is also used for the theme of navbar. This is used in combination with the bg-[contextual color] that sets the theme of navbar. More examples coming up for theming the navbar.

Exploring the components code in navbar

For using the logo/brand or slogan in the navbar, you may use the .navbar-brand class in an anchor tag. You may also apply this class to other elements, however, <a> works better.

For example, I used this in above example:

<nav class=”navbar navbar-expand-lg navbar-light bg-primary”>

<a class=”navbar-brand text-light” href=”https://www.jquery-az.com/” >Slogan/Logo</a>

You may also use <span> with h1 as follows:

<span class=”navbar-brand text-light mb-0 h1″>Slogan/Logo</span>

There, you may also set the logo image rather than using the text or text/logo combination as well:

See online demo and code

The sample code for the logo:

See the complete code and output on the example page.

How to include dropdown menu in navbar

You may also include the dropdown menus in the navbar. Simply use the markup of dropdown menu (explained in its tutorial: Bootstrap 4 dropdowns) in the ,<li> tag with .nav-item and .dropdown classes.

In the following example, I have used link and button dropdowns in the navbar with various classes. The navbar-light bg-warning combination is used for the theme of navbar. The dropdown colors are also set by using text utility classes. While the .btn-secondary is used for the button dropdown.

Have a look:

See online demo and code

The markup:

How to use forms in navbar

The navbar also supports inline forms. These may be useful for site search form with a textbox and search button. You may also use login form or subscription form there.

For including a form in the navbar, use the .form-inline class in the <form> tag and place form controls inside it.

Have a look at the navbar with only form controls and button (a login form):

See online demo and code

The code of navbar with a form:

Justify the form right example

See the sample code with the same form as in above example that is aligned right.

See online demo and code

The markup:

How to color navbar example

Until now you have seen various colored navbar examples. For coloring the navbar, you may use the built-in background classes or use the inline style tag and specify the background color there. You may also create a class in external CSS or under the <style> section.

You should use the .navbar-light for light color backgrounds and .navbar-dark for the dark background colors.

See the example below where different background color classes are used for creating the navbar:

See online demo and code

The complete code of info navbar:

See the complete code for other navbars as well on the example page.

Note: The text color is set at link tags.

Using custom background scheme in Bootstrap 4 navbar

You may also use some other background color scheme for designing the navbar that is based on Bootstrap 4. You may use the style attribute inline or use in external or internal CSS (under style section).

See the following demo where eight different gradient backgrounds are used for theming the navbar. All classes are placed in the style section under the <head> tag. The complete code can be copied from the example page:

See online demo and code

The CSS:

One of the navbar markup:

See all navbar styles and complete code in ton example page.

Creating top fixed navbar demo

Use the .fixed-top class in the <nav> tag for creating a navbar that is fixed on top of the page. Have a look at this demo where I used this class and some dummy text for scroll bar. Scroll down the demo page and see how top bar is fixed:

See online demo and code

The <nav> markup is as follows for this example:

<nav class=”navbar fixed-top navbar-expand-lg navbar-light bg-info “>

Create bottom fixed navbar

Similarly, just use the fixed-bottom class for making the navbar fixed at bottom of the web page. The above markup for bottom fixed navbar will be:

<nav class=”navbar fixed-bottom navbar-expand-lg navbar-light bg-info “>

See online demo and code

The example of sticky top navbar

For creating a sticky navbar on top, use the .sticky-top class. In that case, the content above the navbar is scrollable. As it passes down, the navbar sticks on top. See this demo, where I used dummy text above the navbar. Scroll down and see how it sticks on top:

See online demo and code

The markup with sticky class for the above used navbar:

<nav class=”navbar sticky-top navbar-expand-lg navbar-light bg-info “>