Navigation element and navbar

Navigation element and navbar

• One of the most notable aspects of Bootstrap web pages is the navbar. Navbars are meta components that function as navigation headers for your app or website. In mobile views, navbars collapse and become horizontal as the viewport width rises. The navbar's key features are site name style and basic navigation.
• Default Navigation Bar
• Add the classes.navbar,.navbar-default to the tag to make a default navbar.
• To aid accessibility, add role = "navigation" to the above element.
• Add the.navbar-header header class to the element. Include a navbar-brand-classed element. The text will be slightly larger as a result of this.

Simply add an unordered list with the classes.nav,.navbar-nav to the navbar to add links.

This is demonstrated in the following example.−

OUTPUT :

Responsive Navbar

To make the navbar more responsive, wrap the content that you want to collapse in a div with the classes.collapse and.navbar-collapse. The collapsing effect is triggered by a button with the class of.navbar-toggle and two data- elements. The first, data-toggle, instructs JavaScript on how to handle the button, while the second, data-target, specifies which element to toggle. Then, using the.icon-bar class, make what we like to call the hamburger button. This will turn on or off the elements in the.nav-collapse div>. The Bootstrap Collapse Plugin is required for this functionality to work.

This is demonstrated in the following example:

OUTPUT :