Navigation menu bar is part of each pages on a website. Bootstrap uses the base nav component to create navigation bar (shortly navbar). This helps to create different styles of navigation with the default precompiled component, eliminating the need to code on your own. In this tutorial let us explore on how to create navigation menu bar in Bootstrap.
Bootstrap 5 Navbar Tutorial
- Navbar component basics
- Parts of navbar
- Creating standard Bootstrap navbar
- Using logo in navbar
- Navbar with backgrounds
- Navbar with container
- Using additional elements in navbar
- Showing external content in navbar on toggle
- Positioning of navbar component
1. Basics of Bootstrap Navbar Component
Bootstrap 4 navbar component uses flexbox to make better alignment of each menu items. By default the menu is responsive using JavaScript collapse component. This essentially means you should include the bootstrap.min.js, jQuery and popper.min.js files in your HTML template for the responsive navbar to work.
Navbar by default is fluid occupying the full horizontal width of the layout. You can wrap the entire navbar inside “.container” class to restrict the width to the container or to any pre-defined width.
2. Parts of Bootstrap 4 Navbar Component
Unlike many other components, navbar itself is a collection of elements to make it as a package.
- Use “.navbar” class with nav component to create navigational menu items and one of the “.navbar-expand-sm|md|lg/xl” classes for collapsing on required breakpoint to create hamburger icon.
- You can also use <div> with role=”navigation” instead of <nav>. In this article we have used <nav> in all the examples.
- If you want to remove the responsiveness then just add “.navbar-expand” class to the “.navbar” class.
- Logo or brand is inserted using “.navbar-brand” class.
- A search box form control is added using “.form-inline” class.
- Text can be added in the navbar using “.navbar-text” class.
- Link, button, dropdowns can be added using default components.
- “.navbar-toggler” class is used to control the collapse behavior of the navbar on smaller screens. Further “.collapse” and “.navbar-collapse” classes are used to group navbar elements for smaller devices.
Let us create a standard navigation bar without the logo to better understand the navbar component.
3. Standard Bootstrap Navbar
The standard navbar contains the following items:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">WebNots</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="widgets.html">Widgets</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="themes.html">Themes</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- End of Navbar -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Navbar by default is a full width element, you can control the width by placing the entire <nav> inside a <div> with “.container” class. As mentioned, navbar uses the standard HTML5 <nav> tag for building a navigation menu. Below is the explanation of the CSS classes used in the standard navbar:
- “.navbar” class is required to identify the element as a navbar.
- “.navbar-light” is used to add light color for the text and “.bg-light” is used for lighter background.
- “.navbar-toggler”, “.navbar-toggler-right” and “.navbar-expand-lg” are used to enable the navigation toggle to a hamburger icon from large sized devices. The icon will be shown on the right side of the menu bar. Ensure to add these classes to make the navbar responsive.
- “.navbar-nav”, “.nav-item” and “.nav-link” are used to create individual menu items for the navigation bar. In this example we have used unordered list for creating menu items. You can also simply use <a> tags for this purpose.
- Use “.active” and “.disabled” classes with “.nav-item” to show active and disabled menu items in the navbar. When you use “.disabled” class with “.nav-link” then the hyperlink will be disabled.
- A search box is added with the “.form-inline” class along with form controls and a primary button.
The code will produce the below result on the browser:
Note that we have shown the above navbar code with the complete starter template for easy understanding. For all the below sections, we have only given the navbar code block. You can insert the code block between start and end navbar block of the above code to create a full template.
Using Logo in Navbar
The above navbar has only a text logo. You can easily add image logo using “.navbar-brand” class. Remember to adjust the height and width of the logo using additional inline CSS like below:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2" aria-controls="navbar2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo.png" width="30" height="30" alt="Logo">
</a>
<a class="navbar-brand" href="index.html">WebNots</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar2">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="widgets.html" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Widgets
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="alerts.html">Alerts</a>
<a class="dropdown-item" href="badges.html">Badges</a>
<a class="dropdown-item" href="cards.html">Cards</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>It will produce the below result:
Note in the above example, we have used a dropdown menu item and danger button for the search. Basically you can add almost any type of elements on the navbar.
5. Navbar with Backgrounds
Instead of light text and grey background, you can use light or dark background colors and adjust with “.bg-*” utility classes. For example, below is the example of using dark background color:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
...
</nav>Also use one of the background utility classes to change the background color to primary, info, warning, success, secondary, light, dark or danger. Below is an example for danger color background, you may need to use custom CSS in order to make improve the visibility when using different colors.
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
...
</nav>Change the background to custom color using inline style like below:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: yellow;">
...
</nav>The results will be shown like below:
6. Navbar With Container
Place the navbar component insider a <div> with “.container” class to restrict the width to fit the container width.
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar Inside Container</a>
</nav>
</div>You can also place a container insider the navbar as shown below. In this case the navbar will look more or less similar to standard component as the paddings will be removed automatically.
<nav class="navbar navbar-expand-lg navbar-light bg-primary text-white">
<div class="container">
<a class="navbar-brand" href="#">Container Inside Navbar</a>
</div>
</nav>The result on the browser will look like below:
7. Navbar with Additional Elements
You can place text, input groups, buttons and any type of elements inside the navbar. Below is an example code for the same:
And here is how it will look:
8. Showing External Content on Toggle
Navbar is not necessarily to be used as a menu. It can be used like accordion toggle to show external content. Below is an example code for creating a toggle with hamburger icon and will show the text content when clicked.
<div>
<nav class="navbar navbar-dark bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar6" aria-controls="navbar6" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbar6">
<div class="bg-info p-3">
<h3>Header Inside Collapse</h3>
<p>Content inside the collapse. Both header and content will be shown/hide when the hamburger button is toggled.</p>
</div>
</div>
</div>It will look like below on a click:
9. Positioning Navbar
The position of the navbar can be modified by adding addition CSS classes like below
<!-- Fixed Top Navbar -->
<nav class="navbar fixed-top navbar-dark bg-success">
...
</nav>
<!-- Fixed Bottom Navbar -->
<nav class="navbar fixed-bottom navbar-dark bg-success">
...
</nav>
<!-- Sticky Top Navbar -->
<nav class="navbar sticky-top navbar-dark bg-success">
...
</nav>Wrapping Up
You can’t find a website without navigation menu. It helps users to get access to the important pages on your site and users can search using the search box. So, we hope the above Bootstrap 4 navbar tutorial was helpful to learn creating different types of navigation menu for your site.
1 Comment
Leave your reply.