software-development-company-logo

Tag: Lesson 16: Offcanvas Navigation & Sidebars in Bootstrap

  • Lesson 16: Offcanvas Navigation & Sidebars in Bootstrap

    Module 1: Introduction to Bootstrap 2025

    Module 2: Bootstrap Grid System & Responsive Layouts

    Module 3: Bootstrap Components & UI Elements

    Module 4: Navigation & Menus in Bootstrap

    Module 5: Advanced Bootstrap Features

    Module 6: Forms, Authentication & Data Handling

    Module 7: Bootstrap & JavaScript Integration

    Module 8: Bootstrap with React, Vue, and Angular

    📌 Objective: Learn how to create offcanvas navigation menus and sidebars for modern, responsive layouts in Bootstrap.

    🔹 1. Introduction to Offcanvas Navigation & Sidebars

    Offcanvas components create hidden sidebars that slide into view when triggered.
    They are used for mobile-friendly menus, side navigation, or hidden content panels.

    💡 Why Use Offcanvas & Sidebars?
    ✔️ Saves screen space – Hidden by default, slides in when needed.
    ✔️ Mobile-friendly – Ideal for small screens and app-style layouts.
    ✔️ Easy to implement – Bootstrap provides built-in support.

    🔹 2. Basic Offcanvas Navigation

    Offcanvas menus are hidden by default and appear when triggered.

    ✅ Example: Simple Offcanvas Navigation

    html
    <!-- Button to Open Offcanvas -->
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
    Open Menu
    </button>    <!– Offcanvas Sidebar –>
    <div class=“offcanvas offcanvas-start” id=“offcanvasNav”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Navigation</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body”>
    <ul class=“list-unstyled”>
    <li><a href=“#” class=“text-decoration-none”>Home</a></li>
    <li><a href=“#” class=“text-decoration-none”>About</a></li>
    <li><a href=“#” class=“text-decoration-none”>Services</a></li>
    <li><a href=“#” class=“text-decoration-none”>Contact</a></li>
    </ul>
    </div>
    </div>

    🔹 What happens?

    • The offcanvas menu slides in from the left when clicking the button.
    • Clicking the close button (btn-close) hides the menu.

    🔹 3. Offcanvas Sidebar with a Navbar

    ✅ Example: Navbar with an Offcanvas Sidebar

    html
    <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
    <button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
    ☰ Open Sidebar
    </button>
    <a class="navbar-brand ms-2" href="#">Brand</a>
    </div>
    </nav>    <!– Sidebar Offcanvas –>
    <div class=“offcanvas offcanvas-start” id=“sidebar”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Sidebar Menu</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body”>
    <ul class=“list-group”>
    <li class=“list-group-item”><a href=“#”>Dashboard</a></li>
    <li class=“list-group-item”><a href=“#”>Profile</a></li>
    <li class=“list-group-item”><a href=“#”>Settings</a></li>
    </ul>
    </div>
    </div>

    🔹 What happens?

    • The sidebar appears when clicking the ☰ button.
    • Each menu item is styled using Bootstrap’s .list-group.

    🔹 4. Offcanvas Positioning & Variants

    By default, offcanvas components slide in from the left (offcanvas-start).
    You can change its position using these classes:

    Class Effect
    .offcanvas-start Left sidebar (default)
    .offcanvas-end Right sidebar
    .offcanvas-top Slides in from the top
    .offcanvas-bottom Slides in from the bottom

    ✅ Example: Right-Side Offcanvas

    html
    <button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">
    Open Right Sidebar
    </button>    <div class=“offcanvas offcanvas-end” id=“offcanvasRight”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Right Sidebar</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body”>
    <p>This sidebar appears from the right.</p>
    </div>
    </div>

    🔹 What happens?

    • The offcanvas slides in from the right instead of the left.

    🔹 5. Full-Screen Offcanvas Menu

    Use .offcanvas-full to create a full-screen menu experience.

    ✅ Example: Full-Screen Offcanvas

    html
    <button class="btn btn-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#fullScreenMenu">
    Open Fullscreen Menu
    </button>    <div class=“offcanvas offcanvas-top” id=“fullScreenMenu” style=“height: 100vh;”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Full-Screen Menu</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body text-center”>
    <h2>Welcome to the Full-Screen Menu</h2>
    <p>Click outside to close.</p>
    </div>
    </div>

    🔹 What happens?

    • The menu covers the entire screen from the top.

    🔹 6. Permanent Sidebar for Desktop Layouts

    Use .d-lg-block to keep the sidebar always visible on large screens but collapsible on mobile.

    ✅ Example: Sidebar for Desktop & Offcanvas for Mobile

    html
    <div class="d-lg-block d-none bg-light p-3" style="width: 250px; height: 100vh; position: fixed;">
    <h5>Sidebar</h5>
    <ul class="list-unstyled">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Reports</a></li>
    <li><a href="#">Settings</a></li>
    </ul>
    </div>    <!– Offcanvas for Mobile –>
    <button class=“btn btn-primary d-lg-none” type=“button” data-bs-toggle=“offcanvas” data-bs-target=“#mobileSidebar”>
    Open Sidebar
    </button>

    <div class=“offcanvas offcanvas-start d-lg-none” id=“mobileSidebar”>
    <div class=“offcanvas-header”>
    <h5 class=“offcanvas-title”>Mobile Sidebar</h5>
    <button type=“button” class=“btn-close” data-bs-dismiss=“offcanvas”></button>
    </div>
    <div class=“offcanvas-body”>
    <ul class=“list-unstyled”>
    <li><a href=“#”>Dashboard</a></li>
    <li><a href=“#”>Reports</a></li>
    <li><a href=“#”>Settings</a></li>
    </ul>
    </div>
    </div>

    🔹 What happens?

    • On large screens (lg), the sidebar is always visible.
    • On mobile (d-lg-none), it becomes an offcanvas menu.

    📝 Lesson Recap Quiz

    🎯 Test your knowledge of Bootstrap Offcanvas & Sidebars.

    📌 Multiple-Choice Questions (MCQs)

    1️⃣ What class is used to create a Bootstrap Offcanvas sidebar?
    a) .sidebar-menu
    b) .offcanvas
    c) .nav-offcanvas
    d) .menu-sidebar

    ✅ Correct Answer: b) .offcanvas

    2️⃣ How can you make an offcanvas menu appear from the right side?
    a) .offcanvas-right
    b) .offcanvas-end
    c) .offcanvas-left
    d) .offcanvas-side

    ✅ Correct Answer: b) .offcanvas-end

    📌 True or False

    3️⃣ Offcanvas navigation works without Bootstrap’s JavaScript.
    ✅ Answer: False (It requires Bootstrap’s JavaScript.)

    4️⃣ .d-lg-block keeps a sidebar visible on large screens.
    ✅ Answer: True

    🎯 Practical Challenge

    ✅ Create a sidebar that is always visible on desktops but offcanvas on mobile.
    ✅ Build a right-side offcanvas menu with links and a close button.
    ✅ Post your solution in the discussion forum for feedback!

    🎓 Lesson Summary

    ✅ Offcanvas (.offcanvas) creates hidden sidebars that slide in on button click.
    ✅ .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom control positioning.
    ✅ Permanent sidebars can be hidden on mobile and visible on desktop.