Hit enter after type your search item

23 Bootstrap header layouts: make header menu easily

The header layouts using Bootstrap framework

In this post, I am going to share an excellent plug-in that works with Bootstrap for creating the header menu for your website. It includes 23 free templates that you may choose as per the need of your web project.

The free code is included by the developer that you may get from the demo pages below (a few) or by visiting the plug-in page in Github website (see the credit below).

The free layouts include the code for navbar right menu, center and left. Besides, if you have a shopping related site, a menu is there for you to show basket items. It also includes the mega menu template, navbar with search, sticky navbar, and many others. See the section below for the live demos of a few menus.

A demo of header menu with dropdown

The following layout for the header menu contains navigation links to the right side. A dropdown menu is also added with three levels. The animation effect is used for the dropdown menu with fadeInDown and fadeOutUp values. You may set these values in the data attributes as shown in the live demo below:

bootstrap header

See online demo and code

Following is the markup for this header menu:


A demo with left navigation for the same menu

If you want to use the same menu as above with left navigation then this is just the matter of changing a class in the main div. For that, find the div with navbar-menu ID and change the navbar-right to navbar-left in the <ul> tag:


See the demo online:

bootstrap header left

See online demo and code

A demo of header menu with shopping cart items

If you have a shopping related website, you may show the shopping cart items on the right corner of header menu. As the mouse is hovered over the cart icon, the items in the cart will display in the header menu. See the online demonstration:

bootstrap header shopping cart

See online demo and code

The markup:


Displaying mega menu demo

By using this plug-in, you may also create a mega menu. See the following demo where a mega menu is integrated into the above example’s menu adjacent to the dropdown.

bootstrap header mega menu

See online demo and code

You may get the complete code from the demo page.

Setting up this header plug-in in your website

For setting up this plug-in, you need to download it from the Github website. After downloading the zipped file, extract the package and get a few dependent files:

In the <head> section:


Above the </body> tag:



The non-CDN files are included in the downloaded package.

You may also see 23 layouts linked from the source page.

This div height required for enabling the sticky sidebar