Navbar with Offcanvas Drawer on Mobile

Responsive Bootstrap 6 navbar that shows inline links on desktop and moves them into a slide-in Drawer with icons, studio hours and social links on small screens.

Also known as: mobile slide-in navigation drawer, responsive navbar with side menu, off canvas navigation menu, hamburger side drawer

Bootstrap 6 Navbars Responsive #drawer #mobile-menu #navbar #offcanvas #responsive

Navbar with Offcanvas Drawer on Mobile live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A responsive Bootstrap 6 navbar for a small business site. On wide screens it shows the brand, an inline link row, a phone number and a booking button. On phones and tablets the same markup becomes a slide-in Bootstrap 6 Drawer from the left, with larger tap targets, link icons, studio hours and social buttons. The warm cream and terracotta palette suits studios, agencies and local services.

How it works

The navbar uses lg:navbar-expand, the Bootstrap 6 replacement for navbar-expand-lg. Inside .container sit the brand, the .ndw-toggler button and a <dialog class="drawer drawer-start ndw-panel">. Below a navbar width of 1024px the toggler is visible, and data-bs-toggle="drawer" with data-bs-target="#ndw-panel" opens the drawer as a modal dialog with a blurred backdrop. From 1024px Bootstrap renders the same <dialog> inline, hides its .drawer-header and lays out .drawer-body as a row. No markup is duplicated.

style.css styles both states. A named container query, @container ndw (width >= 1024px), hides .ndw-link-icon and the .ndw-extra info card. It also turns the active link into an underline and places .ndw-actions in a row. The navbar is a query container in Bootstrap 6, so the layout follows the navbar's width, not the viewport.

script.js imports Drawer from the bundle. When a link is clicked it moves .active and aria-current="page", then closes the drawer if it is open. It also keeps aria-expanded on the toggler in sync through shown.bs.drawer and hidden.bs.drawer.

Customization

--ndw-accent on .ndw-root: recolors the logo, the active link, the link icons and both .ndw-cta buttons.
--ndw-cream and --ndw-sand on .ndw-root: change the navbar and drawer background and the hours card.
Replace drawer-start with drawer-end, drawer-top or drawer-bottom on .ndw-panel to slide the menu in from another side.
--bs-drawer-width on .ndw-panel: sets the drawer width (default min(340px, 88vw)).
Change lg:navbar-expand to md:navbar-expand and the container query to 768px so the inline layout starts earlier.
Delete .ndw-extra if you only need links in the drawer.
Remove event.preventDefault() in script.js so the links follow their real href.

Use cases

Small business sites: inline links, phone number and booking button on desktop, one drawer on phones
Studios and agencies: the mobile drawer adds link icons, studio hours and social buttons
Local services: larger tap targets make navigation comfortable on phones and tablets
Salons and clinics: a booking button stays easy to reach in the header

Accessibility

The navbar is a labelled <nav>. The toggler has aria-controls, aria-expanded and an aria-label. The drawer is a native <dialog> labelled by its title. It traps focus while open, closes with Escape or the close button, and returns focus to the toggler. The current page uses aria-current="page". Icon-only social buttons carry aria-labels, and every interactive element has a visible terracotta focus outline.

Bootstrap 6 notes

Bootstrap 5 used .offcanvas plus .navbar-collapse for this pattern. Bootstrap 6 uses a single <dialog class="drawer"> inside the navbar, closed with data-bs-dismiss="drawer". Avoid custom class names that contain the word "drawer" inside an expanding navbar: Bootstrap's [class*=drawer] selector would match them. Built on Bootstrap 6.0.0-alpha.1, so APIs may still change. Icons come from Bootstrap Icons.

Navbar with Offcanvas Drawer on Mobile at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons
Layout: Responsive, works on mobile
Category: Navbars
License: Free for personal and commercial use

Questions about this template

Can I use the Navbar with Offcanvas Drawer on Mobile code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.