Drawers
Panels from the side or the bottom
From the end
Filters
Code
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#drw-end" aria-controls="drw-end">Open drawer</button>
<div class="offcanvas offcanvas-end glass" id="drw-end" tabindex="-1" role="dialog" aria-labelledby="drw-end-title">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="drw-end-title">Filters</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<form id="drw-end-form">
<div class="d-flex flex-column gap-3">
<div class="form-check"><input class="form-check-input" type="checkbox" id="f-0" checked><label class="form-check-label" for="f-0">Paid</label></div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="f-1" checked><label class="form-check-label" for="f-1">Pending</label></div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="f-2"><label class="form-check-label" for="f-2">Overdue</label></div>
<div class="form-check"><input class="form-check-input" type="checkbox" id="f-3"><label class="form-check-label" for="f-3">Draft</label></div>
</div>
</form>
</div>
<div class="offcanvas-footer">
<button type="reset" class="btn btn-ghost" data-toast='{"title":"Filters reset","text":"Paid and Pending are ticked again.","tone":"info"}' form="drw-end-form">Reset</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Apply</button>
</div>
</div>From the start
Code
<button type="button" class="btn btn-gray" data-bs-toggle="offcanvas" data-bs-target="#drw-start" aria-controls="drw-start">Open from the start</button>
<div class="offcanvas offcanvas-start glass" id="drw-start" tabindex="-1" role="dialog" aria-labelledby="drw-start-title">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="drw-start-title">Navigation</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="list">
<li>
<a class="list-row" href="mail-inbox.html">
<span>Inbox</span>
</a>
</li>
<li>
<a class="list-row" href="chat.html">
<span>Chat</span>
</a>
</li>
<li>
<a class="list-row" href="calendar.html">
<span>Calendar</span>
</a>
</li>
<li>
<a class="list-row" href="files.html">
<span>Files</span>
</a>
</li>
</ul>
</div>
</div>Bottom sheet
Good on phones.
Code
<button type="button" class="btn btn-gray" data-bs-toggle="offcanvas" data-bs-target="#drw-bottom" aria-controls="drw-bottom">Open sheet</button>
<div class="offcanvas offcanvas-bottom glass" id="drw-bottom" tabindex="-1" role="dialog" aria-labelledby="drw-bottom-title">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="drw-bottom-title">Share</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="d-flex align-items-center flex-wrap gap-3">
<button type="button" class="btn btn-gray" data-copy="nearby"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Copy link</button>
<a href="mail-compose.html" class="btn btn-gray"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Email</a>
<a href="chat.html" class="btn btn-gray"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Message</a>
</div>
</div>
</div>