10 Awesome Navbar for your website with Bootstrap
Navigation bar is main component of Web site. One of the main advantages of the Bootstrap 5 navbar is its responsive design, which ensures that it works well on a variety of devices and screen sizes. This is essential for providing a good user experience and ensuring that your website is accessible to all users. In addition to its responsive design, the Bootstrap 5 navbar is also highly customizable, allowing you to easily create a navbar that fits the look and feel of your website. You can choose from a variety of predefined styles, such as light or dark, and customize the color scheme, font, and other design elements to match your brand.
The Bootstrap 5 navbar also supports dropdown menus, search boxes, and other interactive elements, making it easy to add complex navigation functionality to your website. This can include category menus, search functionality, and other features that help users find and access the different pages and content on your site.
Overall, the Bootstrap 5 navbar is a powerful and versatile tool for creating a responsive, customizable, and user-friendly navigation system for your website. By leveraging the predefined styles and features provided by Bootstrap, you can create a navbar that helps users easily navigate and interact with your site.
Here are 20 different Bootstrap navigation bar example codes (Basic to Advance)
1. Basic navigation bar with a logo and three links
See the Pen Basic navigation bar with a logo and three links by amila madushan (@amila123) on CodePen.
2. Navigation bar with dropdown menus
See the Pen Navigation bar with a dark color scheme and dropdown menus by amila madushan (@amila123) on CodePen.
3. Navigation bar with a dark color scheme
To create a dark navbar in Bootstrap, you can use the “navbar-dark” class along with the “bg-dark” background color class. Here is an example of a basic dark navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
</nav>
You can also customize the color scheme and other design elements of the navbar by using additional Bootstrap classes and styles. For example, you can add a dropdown menu or search box by using the “dropdown“ and “form-inline“ classes, respectively.
It’s important to note that the “navbar-dark” class should be used in conjunction with a light background color, such as “bg-light“, to ensure that the text and other elements of the navbar are visible. If you are using a dark background color, you should use the “navbar-light” class instead. Here is complete example of a basic dark navbar:
See the Pen 3. Navigation bar with a dark color scheme by amila madushan (@amila123) on CodePen.
4. Navigation bar with a Custom color scheme
To add a custom background color to a Bootstrap navbar, you can use the “bg-*” background color classes. These classes allow you to easily set a background color for the navbar using one of the predefined color shades provided by Bootstrap.
For example, to set the navbar’s background color to primary blue, you can use the “bg-primary” class:
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
...
</nav>
You can also use the “style” attribute to set a custom background color using a hex code or other valid CSS color value:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #ba68c8;">
...
</nav>
You can also use custom CSS styles in your own stylesheet to customize the navbar’s background color and other design elements. Just be sure to use the proper selectors to target the navbar element in your styles.
Here is complete example of Nav Bar with custom color
See the Pen 4. Navigation bar with a Custom color scheme by amila madushan (@amila123) on CodePen.
5. Fixed Top Nav Bar
To create a fixed top navigation bar in Bootstrap 5, you can use the “fixed-top” class on the “nav” element. Here’s an example:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
This will create a fixed top navigation bar that stays at the top of the viewport as you scroll down the page. The “navbar-light” class applies a light color scheme to the navigation bar, and the “navbar-expand-lg” class makes the navigation bar collapse on smaller screens and display a toggle button.
You can customize the appearance of the navigation bar by using different Bootstrap classes. For example, you can use the “navbar-dark” class to apply a dark color scheme, or use the bg-* classes to change the background color. You can also use the navbar-* utilities to change the color of the links and toggle button.
See the Pen 5. Fixed Top Nav Bar by amila madushan (@amila123) on CodePen.
6.Social Media Network Nav Bar 01
See the Pen 6. Social Media Network Nav Bar 01 by amila madushan (@amila123) on CodePen.
7.Social Media Network Nav Bar 02
See the Pen 7. Social Media Network Nav Bar 02 by amila madushan (@amila123) on CodePen.
8.Social Media Network Nav Bar 03
See the Pen 8. Social Media Network Nav Bar 03 by amila madushan (@amila123) on CodePen.
9.Social Media Network Nav Bar 04 (Offcanvas Navbar)
See the Pen 9. Social Media Network Nav Bar 04 (Offcanvas Navbar) by amila madushan (@amila123) on CodePen.
10.Social Media Network Nav Bar 05 (Offcanvas Navbar – Dark)
See the Pen 10.Social Media Network Nav Bar 05 (Offcanvas Navbar – Dark) by amila madushan (@amila123) on CodePen.
For more information, you can refer to the Bootstrap documentation on navbars: https://getbootstrap.com/docs/5.0/components/navbar/.
