How to create offcanvas navbar bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create Offcanvas Navbar in Bootstrap Easily

To create an offcanvas navbar in Bootstrap, use the navbar component combined with the offcanvas component. Add a toggle button with data-bs-toggle="offcanvas" and link it to an offcanvas element containing the navigation links. This creates a sidebar menu that slides in on smaller screens.

📐

Syntax

The offcanvas navbar uses Bootstrap's navbar and offcanvas components together. The main parts are:

Navbar container: Wraps the navigation bar.
Toggle button: A button with data-bs-toggle="offcanvas" to open the sidebar.
Offcanvas element: The sidebar menu that slides in, with navigation links inside.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      Toggle menu
    </button>
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <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="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

💻

Example

This example shows a simple offcanvas navbar with a toggle button. When you click the button, a sidebar slides in from the left with navigation links.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Offcanvas Navbar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <nav class="navbar bg-light">
    <div class="container-fluid">
      <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
        Toggle menu
      </button>
      <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <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="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a light navbar and a blue button labeled 'Toggle menu'. Clicking the button slides in a sidebar from the left showing navigation links: Home, Link, and a Dropdown menu.

⚠️

Common Pitfalls

Common mistakes when creating an offcanvas navbar include:

Forgetting to include Bootstrap's JavaScript bundle, which is needed for the toggle to work.
Not setting the correct data-bs-target or id on the offcanvas element, so the toggle button does nothing.
Missing aria-controls or aria-labelledby attributes, which help with accessibility.
Placing the offcanvas element outside the navbar container, which can break layout or styling.

Example of a wrong toggle button missing data-bs-target:

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas">
  Toggle menu
</button>

<!-- Correct toggle button -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
  Toggle menu
</button>

📊

Quick Reference

Tips for Offcanvas Navbar in Bootstrap:

Use offcanvas-start to slide in from the left, or offcanvas-end for right side.
Always include tabindex="-1" on the offcanvas for keyboard accessibility.
Use btn-close button inside offcanvas to allow users to close the menu.
Include Bootstrap CSS and JS bundle for full functionality.
Use semantic nav and ul elements for better accessibility.

✅

Key Takeaways

Use Bootstrap's navbar and offcanvas components together to create an offcanvas navbar.

The toggle button must have correct data attributes to open the offcanvas menu.

Include Bootstrap's JavaScript bundle for the toggle functionality to work.

Add accessibility attributes like aria-controls and aria-labelledby for better user experience.

Place the offcanvas element inside the navbar container for proper layout and styling.