Bootstrap navbar – Create Bootstrap menu with collapse navbar examples

The navbar in Bootstrap

Bootstrap provides an easy way to create menu bar for web applications by using the .navbar class. Not only you can create simple static menu that contains basic menu items like Home, products, services, about, contact, help etc but also you can include search facility, forms, dropdown in navigation bars quite easily. Twitter Bootstrap navbar is the meta component that is responsive. Navbar starts as collapsed in the mobile devices.

This tutorial will show you how to use navbar with examples for simple and added components that you can see online or try at your local machine as well.

Quick examples of  navbar

Menu with navbar example

navbar example with a form

Fixed navbar example to Top

Fixed Bottom navbar example

A basic example of creating menu with bootstrap navbar

The following example creates a simple navigation on the top of “Bootstrap theme” with general menu items like Home, products, special offer, services etc. The main navbar is contained in the <nav> tag. While an unordered list, <ul> is created inside the <div> with Bootstrap collapse class that contains menu items.

Experience this online

Following example adds a form inside the navbar that adds search site facility in the navigation bar. The form is added just after </ul> closing tag.

Experience this online

Note that, you can add Bootstrap icons at the form button as well. An example in navbar is shown in the Bootstrap icon chapter.

Adding dropdown to navbar example

Following example adds a dropdown inside the navbar. A dropdown is nothing except a list <ul> that uses twitter bootstrap dropdown class. See how simple it is to create a dropdown inside the navbar.

Experience this online

You can see, a dropdown of products, just ahead of Home menu item, is created with a separator as well. You can learn more about Bootstrap dropdown in its chapter.

Using button in the navbar example

You can add buttons in the navigation bar by using the .navbar-btn class in the button tag. See the example below to add Sign-in button in the navigation bar.

Experience this online

You can learn more about Bootstrap button styles that you can easily include anywhere in the web documents, in its chapter.

Top-fixed navbar example

By adding navbar-fixed-top class to <nav> tag, you can create a fixed menu bar on top of the web page. As you scroll, the navbar remains fixed. By default, the content below the navigation will overlap top fixed menu. To avoid that you can use padding-top as a separate style. See the following example. To experience fixed top menu, shorten the window to the extent where you can see the navigation bar.

Experience this online

Fixed Bottom navbar example

Same example as above but navbar is fixed to bottom by using the navbar-fixed-bottom class. See the following example.

Experience this online

One of the ways you can change the default color of bootstrap navbar is by using your own CSS besides provided by Bootstrap. You can add the background color, border etc by using the <style> attribute in the main <div>, wrapping the navigation bar. The following example shows how you can do it.

Experience this online

This might look ugly, but you can add your creativity by using the style with inline CSS properties or add CSS classes or refer by ID in your own external CSS file.

Also see Twitter Bootstrap Tutorial | Bootstrap Table | Bootstrap Form

Was this article helpful?

Related Articles

Leave A Comment?