Responsive Sidebar Using Bootstrap 5 Offcanvas
How to create Responsive Sidebar Using Bootstrap 5 Offcanvas
Description
Now that Bootstrap 5 has an offcanvas component, it makes sense to explore creating a Bootstrap 5 sidebar. Sidebars are often used for vertical navigation, but can be used for virtually any content aside from the main content.
How to use it
Add CDN
<link rel=”stylesheet” href=”/path/to/cdn/bootstrap.min.css” />
<link rel=”stylesheet” href=”/path/to/cdn/bootstrap-icons.min.css” />
<script src=”/path/to/cdn/bootstrap.min.js”></script>
HTML Structure
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h3>
<i class="bi bi-chat-right-text-fill"></i>
Sidebar
</h3>
</a>
</div>
<div class="offcanvas-body px-0">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#home-collapse"
aria-expanded="true"
>
Home
</button>
<div class="collapse show" id="home-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="/" class="rounded">Overview</a></li>
<li><a href="#" class="rounded">Updates</a></li>
<li><a href="#" class="rounded">Reports</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded collapsed"
data-bs-toggle="collapse"
data-bs-target="#dashboard-collapse"
aria-expanded="false"
>
Dashboard
</button>
<div class="collapse" id="dashboard-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="rounded">Overview</a></li>
<li><a href="#" class="rounded">Weekly</a></li>
<li><a href="#" class="rounded">Monthly</a></li>
<li><a href="#" class="rounded">Annually</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded collapsed"
data-bs-toggle="collapse"
data-bs-target="#orders-collapse"
aria-expanded="false"
>
Orders
</button>
<div class="collapse" id="orders-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="rounded">New</a></li>
<li><a href="#" class="rounded">Processed</a></li>
<li><a href="#" class="rounded">Shipped</a></li>
<li><a href="#" class="rounded">Returned</a></li>
</ul>
</div>
</li>
<li class="border-top my-3"></li>
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded collapsed"
data-bs-toggle="collapse"
data-bs-target="#account-collapse"
aria-expanded="false"
>
Account
</button>
<div class="collapse" id="account-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="rounded">New...</a></li>
<li><a href="#" class="rounded">Profile</a></li>
<li><a href="#" class="rounded">Settings</a></li>
<li><a href="#" class="rounded">Sign out</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
Post a Comment