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!

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site