Lesson 16: Offcanvas Navigation & Sidebars in Bootstrap

—

by

admin
in
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.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *