PUBLISHED ON: AUGUST 13, 2021
How to add toggle button within the navbar using Bootstrap 5?
The Bootstrap Navbar is used to create the headers of a website which in turn helps in navigating between the web pages of that website. The Navbar contains a list of items in form of links.
Lets us create a simple Navbar with a toggle button using Bootstrap 5.
Creating a navbar using bootstrap 5
- The .navbar class is used within <nav> element to create a navbar.
- The .navbar is wrapped with navbar-expand-{sm, md, lg, xl, xxl } for responsive collapsing and color schemes classes.
- Use the .container class to control the width of the navbar.
- Use .navbar-brand to add a website, product, or company name.
- Use .navbar-nav for full-height and lightweight navigation.
- Use .navbar-item to add items to the navigation.
- Use .navbar-link to add links within .navbar-item.
Example: Creating a navbar using bootstrap 5
In the given example, we have created a navigation bar with a toggle button using Bootstrap 5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Course</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Output
If you see this navbar with the normal laptop size of the screen then it has no issue. But when you reduce the size of the screen to some smaller size. You will find that there are no items within the navbar.
Adding buttons to Navbar
The problem can be solved by adding a button to the navbar. The <button> element is added with the .navbar-toggler class.
- The button is added with the .navbar-toggler-icon class.
- This button will add a hamburger menu when the size of the screen is reduced.
- Also, wrap the list of items to the .collapse class along with the navbar-collapse attribute and some id.
- Add data-bs-target to the <button> which will point to id of .collapse plugin and data-bs-toggle="collapse".
This will help to make the navbar collapsable.
Example: A navbar with a collapsable button
In the given example, we have created a navigation bar with a toggle button using the Bootstrap 5 and collapse plugin.
Conclusion
We can easily add the buttons in the navbar and toggle the button using the collapse plugin. Bootstrap 5 made it simple to add toggle buttons within the navbar.
