iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A Bootstrap hamburger menu is the responsive navbar toggler: a button that shows or hides navigation links on small screens and displays them inline at a chosen breakpoint. The button alone does nothing. Bootstrap’s navbar documentation states that “Responsive behavior depends on our Collapse JavaScript plugin.” A working menu therefore needs three things: the correct navbar markup for your Bootstrap version, the matching Bootstrap JavaScript, and a toggler whose target matches the collapsible element.
This guide organizes hamburger menu patterns into families that differ in layout and behavior, rather than presenting a numbered list of 35 individually tested demos. The MDBootstrap free hamburger page is a useful source of visual ideas, and Bootstrap’s own navbar pages define the markup you should build on. Each example below shows the structure and the decisions that change the result.
How the hamburger toggle works in Bootstrap
Bootstrap’s navbar is built from a handful of classes. The outer element is a nav with the .navbar class. The .navbar-expand-* class controls the breakpoint: below that width, the links are hidden inside a collapsible region; above it, they sit inline. The toggler is a button with the .navbar-toggler class, and the region it controls is an element with .collapse.navbar-collapse.
The available breakpoint variants are .navbar-expand-sm (576px and up), -md (768px), -lg (992px), -xl (1200px), and -xxl (1400px). Choose the smallest one at which your brand, links, and any search field fit on one row without wrapping. No single breakpoint suits every set of labels, so test with your real navigation text at several widths.
#1 Best Overall
Working markup for Bootstrap 5.3
The steps below assume Bootstrap 5.3. Adjust the version-specific parts if your project uses another release.
- Load the Bootstrap 5.3 stylesheet in the
head, and load the bundle (bootstrap.bundle.min.js) before the closingbodytag. The bundle includes Popper, which the Collapse plugin does not need, but it is the simplest way to guarantee the plugin is present. - Wrap the header in
<nav class="navbar navbar-expand-lg bg-body-tertiary">, and place a container inside it. - Add the toggler as a real
<button type="button">withdata-bs-toggle="collapse", adata-bs-targetthat starts with#,aria-controls,aria-expanded="false", and anaria-label. - Give the collapsible container an
idthat exactly matches thedata-bs-targetvalue, and apply thecollapse navbar-collapseclasses to it. - Mark the current page link with
aria-current="page"and theactiveclass.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Site name</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#mainNav"
aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>The CDN version number in the example is illustrative: confirm the current 5.3.x release on the official site before you copy it, and keep the CSS and JavaScript on the same version.
Version differences to check before copying
Bootstrap changed some navbar details between releases. A snippet written for one version can look wrong or lose its theme on another, so check the markup against the version your project loads.
Free tools Windows power users keep installed
One-click scans. No signup required.
| Version | Documentation reviewed | Theming notes | What to check when copying |
|---|---|---|---|
| Bootstrap 5.0 | Navbar page for 5.0 | Uses light and dark modifier classes on the navbar. | Confirm the toggler, data-bs-* attributes, and the Collapse plugin are present. |
| Bootstrap 5.2 | Navbar page for 5.2 | Introduces CSS-variable theming for navbars. The page states that .navbar-light is deprecated in this version. |
Replace deprecated light-theme classes if you are moving to a newer release. |
| Bootstrap 5.3 | Navbar page for 5.3 | Documents the offcanvas navbar, fixed navbars, and accessibility guidance in the same page. | Use the markup in the working example above, then check it against the current navbar page. |
These sources cover 5.0, 5.2, and 5.3. They do not establish which release is the newest at the time you read this, so verify the current version on the official Bootstrap site before you start a new project.
Rank #3
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choosing a hamburger menu pattern
Most free examples are variations on a few structural decisions. Pick the structure first, then apply colors and icons. The families below are grounded in the navbar components Bootstrap documents. Each third-party snippet still needs its own check before you describe it as working or accessible.
Standard collapsing navbar
This is the pattern shown above: brand on the left, a toggler on the right, and links inside a collapsible region. It is the safest starting point because it uses only the core navbar classes and the Collapse plugin.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Toggler with no visible brand at the narrowest width
On a phone, the brand can take space that the toggler needs. A common approach is to hide the brand text below your breakpoint with Bootstrap’s responsive display utilities, such as d-none d-lg-block, and keep the brand link in the markup for larger screens. Check that the page still has an accessible name and a clear way back to the home page on small screens.
Light and dark themes
In Bootstrap 5.3, you can set the theme on the navbar with data-bs-theme="dark" and use a matching background. The navbar’s links and toggler then take their colors from the theme. Test the focus outline and the text contrast against the background, not only the default appearance. Bootstrap 5.2 and 5.0 use different theming classes, so do not mix the two approaches.
Best Value
- Used Book in Good Condition
Dropdowns inside the collapsed menu
Dropdown items placed inside the collapse region open within the expanded menu on small screens. Keep dropdowns shallow: each extra level adds scrolling and tapping on a narrow screen. Confirm that the dropdown menu can be opened and closed with the keyboard as well as by touch.
Offcanvas navigation panel
An offcanvas menu slides a panel in from the edge of the screen instead of expanding the navbar in place. Bootstrap’s navbar page documents this pattern for 5.3. The markup uses offcanvas-lg offcanvas-end on the panel, with a toggler whose data-bs-toggle="offcanvas" points to the panel’s id. Because the panel overlays the page, it does not push content down, which changes how the page reads when the menu is open.
Fixed or sticky navbars
A fixed navbar is removed from normal document flow, so it can cover the top of the page content. Add padding to the body equal to the navbar height, or use sticky-top if you want the navbar to stay in flow until the user scrolls. Test the first screen of content on a phone, where the expanded menu can cover more of the page.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Brand images, search fields, and aligned controls
A logo image or a search field can make the collapsed bar crowded. Keep the image at a fixed height, and place the search field inside the collapse region if it does not need to stay visible at the narrowest width. Verify that the input has a label, since placeholder text alone is not an accessible name.
Quick Recap
| Pattern | Breakpoint behavior | Menu presentation | Overlay or push | Check before using |
|---|---|---|---|---|
| Standard collapsing navbar | Set by one .navbar-expand-* class |
Links expand inside the navbar | Pushes content down | Links fit on one row at the chosen breakpoint |
| No visible brand at narrow widths | Brand hidden with responsive utilities | Toggler stands alone on small screens | Pushes content down | Page still has a clear home link and accessible name |
| Light and dark theme | Same as standard navbar | Colors change with the theme | Pushes content down | Text and focus outline contrast on the chosen background |
| Dropdowns in collapsed menu | Same as standard navbar | Dropdown opens inside the expanded list | Pushes content down | Dropdown works with keyboard and touch |
| Offcanvas panel | Set by offcanvas-lg or the size class you choose |
Panel slides in from an edge | Overlays the page with a backdrop by default | Panel closes with Escape and returns focus to the toggler |
| Fixed or sticky navbar | Set by the navbar expansion class | Bar stays visible while scrolling | Fixed removes it from flow; sticky keeps it in flow | Body padding or spacing prevents hidden content |
| Brand image and search field | Set by the navbar expansion class | Search may move into the collapse region | Pushes content down | Search input has a visible label |
Troubleshooting a hamburger menu that does not work
- The button does nothing. Confirm that the Bootstrap JavaScript bundle loads without a console error, and that it appears after the markup or uses the
deferattribute in the correct order. - The button does nothing, and the console shows no error. Compare the
data-bs-targetvalue with the collapsible element’sid. The target must start with#and match exactly, including case. - The menu never collapses. Check that the navbar has a
.navbar-expand-*class and that the collapse container has.navbar-collapse. Without them, the links remain visible at every width. - The menu collapses at the wrong width. Change the expansion class to a larger breakpoint if the links wrap, or a smaller one if there is unused space at the chosen width.
- Snippets from older tutorials fail. Compare the
data-bs-*attributes and theme classes with the version you load. Bootstrap 3 usesdata-toggle, notdata-bs-toggle. - Page content is hidden under a fixed navbar. Add body padding equal to the navbar’s height, or switch to
sticky-top.
Accessibility checklist
- Wrap the links in a
navelement, which exposes a navigation landmark. Userole="navigation"only when a different element must act as the landmark. - Give the toggler an accessible name with
aria-label, and keeparia-controlspointed at the collapse container. - Check that
aria-expandedchanges betweentrueandfalseas the menu opens and closes. Bootstrap’s Collapse plugin manages this when the attributes are present in the markup. - Set
aria-current="page"on the link for the current page. - Test focus visibility on every link, the toggler, and any dropdown items, using the keyboard only.
- If you add custom transitions to the menu, respect
prefers-reduced-motion; Bootstrap’s navbar documentation describes reduced-motion behavior for its own component animation.
Sources
- Bootstrap v5.3 Navbar — responsive navbar, toggler, accessibility, offcanvas, and fixed-navbar guidance.
- Bootstrap v5.2 Navbar — navbar behavior and CSS-variable theming notes for that release.
- Bootstrap v5.0 Navbar — earlier Bootstrap 5 responsive navbar documentation.
- MDBootstrap Hamburger examples — free Bootstrap 5 hamburger examples and tutorial material used here as a source of visual patterns.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
