Bootstrap - Navigation Demo

What is a navbar?

The Bootstrap navbar is a responsive navigation header at the top of a webpage. It can expand or collapse based on the screen size, providing a user-friendly navigation experience for websites.

Bootstrap provides built-in CSS classes to create a standard navigation bar.

  • The .navbar class is used to create a navigation bar component.

  • The .navbar-brand class represents the brand or logo of the website or application.

  • The .navbar-collapse class makes the navigation menu collapse into a dropdown or toggle button.

  • The .navbar-nav class is used to create a horizontal navigation menu with multiple navigation links or items.

  • The .nav-item class should be applied to each list item (<li>) within the navigation bar.

  • The .nav-link class is used to styled anchor tags (<a>) within a navigation component.

Some of the examples of the navbars are as follows.

Example Description Download link
Basic navbar This example shows the basic structure of navbar in Bootstrap. Download
Navbars offcanvas This example shows the use of offcanvas navbars within a responsive web design. Download
Navbar static This example shows the implementation of a static navbar fixed in its position on a webpage. Download
Navbar fixed This example shows the navigation bar fixed to the top of the viewport (fixed-top). Download
Navbar bottom This example shows navigation bar has a fixed position at the bottom of the page. Download
Offcanvas navbar This example shows a navbar that can be expanded into sliding offcanvas menu. Download