Bootstrap 5.1 Navbar and Hamburger toggler 🍔
Tags: bootstrap, navbar, collapse, hamburger
Published: 2022-02-22 04:36:41

**STEP 1:**
Add [Bootstrap CSS](https://getbootstrap.com/docs/5.1/getting-started/introduction/#css) inside your `<head>` tag. Make sure it's **ABOVE** your other stylesheets.

**STEP 2:**
Add [Popper and Javascript plugins](https://getbootstrap.com/docs/5.1/getting-started/introduction/#separate) at the bottom, above your closing `</body>` tag.

**STEP 3:**
OK. This goes inside your `<body>` tag probably below your `<header>` or `<jumbotron>` sections.
Here's the rest of the code:

```
<nav class="navbar navbar-expand-sm navbar-dark">
            <div class="container">
                <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#n_bar" aria-controls="navbarNavAltMarkup" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="n_bar">
                    <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="#">Careers</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Links</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Membership</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Join Us</a></li>
                    </ul>
                </div>
            </div>
```
**NOTE:**
You will need to change the href="#" to wherever your other pages are located. So for example:
```
<li class="nav-item"><a class="nav-link" href="pages/about.html">About</a></li>
```

**STEP 4:**
Add the navbar class to your custom CSS sheet and change the background to a dark color. (I'm using black) because we added  the `navbar-dark` class with the `navbar` class.
```
.navbar {
    background-color: black;
}
```

And that's it! It should look something like this when the viewport is **expanded**:
![expanded view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tygwyuozqn0ys60sgj36.png)

And it should look like this when the viewport is **extra small** and we **clicked on the hamburger menu**:
![compact view with menu engaged](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjvrg75n9b4jv5192x3j.png)

If you're interested, here's an explanation of the bootstrap classes, attributes and aria values we used:

**_class="navbar"_**
the main class needed to make the navbar notice how I used a `<nav>` tag and not `<div>`

**_class="navbar-expand-sm"_**
this class will expand the navbar for larger viewports. As you can see I used `sm` which mean for any viewports with a small breakpoint or higher

**_class="navbar-dark"_**
this class will use color choices for a dark background. If you omit it, it will be suited for light colors

**_class="container"_**
this will help give the navbar items some more padding

**_class="navbar-toggler"_**
this will enable the hamburger icon button to be displayed

**_class="ms-auto"_**
this is Bootstrap's [spacing utility class](https://getbootstrap.com/docs/5.1/utilities/spacing/), specifically **m**argin-**s**tart-**auto** which will push the button all the way to the right by expanding its left margin. (Note: if you use Bootstrap 4 it's `ml-auto` with an 'l'.)

**_data-bs-toggle="collapse"_**
this attribute is needed to communicate with javascript to collapse the menu

**_data-bs-target="#id-name"_**
this attribute holds the `id` of the element that is either hidden or shown when clicked

**_aria-controls="navbarNavAltMarkup"_**
aria - **A**ccessible **R**ich **I**nternet **A**pplications
will allow assistive technologies to convey appropriate information to persons with disabilities

**_aria-label="Toggle navigation"_**
will give indication that the navbar has been toggled

**_class="navbar-toggler-icon"_**
this will display the hamburger icon

**_class="collapse"_**
this class will start the hamburger menu in the collapsed state

**_class="navbar-collapse"_**
this class is needed for the large viewport menu to display properly, as well as the expanded options on the hamburger menu to be positioned correctly

**_id="id-name"_**
from the `<div>` which holds the `<ul>`, this ID will be passed to the data attribute `data-bs-target` inside `<button>` element

**_class="nav-item active"_**
this class is needed in the `<li>` element to designate the list item as one of the options for the navbar
**NOTE:** add the `active` class for the page which is currently active. So if you're working on index.html the `<li>` element which holds the `home` item would be active

**_class="nav-link"_**
this class is within the `<a>` element to indicate it's a link

_**Thank you** for reading this post. I know my explanations may not have been 100% clear but I hope it was sufficient to create a basic collapsable menu with breakpoints for large/small screens._ 

_You can follow me on [Twitter](https://twitter.com/Bennyboy_JP) or just hit me up!_