Bootstrap 5.1 Navbar and Hamburger toggler 🍔

#bootstrap #navbar #collapse #hamburger

STEP 1:
Add Bootstrap CSS inside your <head> tag. Make sure it's ABOVE your other stylesheets.

STEP 2:
Add Popper and Javascript plugins 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:

And it should look like this when the viewport is extra small and we clicked on the hamburger menu:

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, specifically margin-start-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 - Accessible Rich Internet Applications
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 or just hit me up!