Offcanvas
Offcanvas panels for filters, contextual detail, and layered utility workflows
Use offcanvas panels when content should stay attached to the current screen instead of feeling like a full modal. This page standardizes placement, width, scroll strategy, and embedded utility patterns for Lumora drawers.
Four
placements
Filter and detail
drawers
Live playground
Copy-ready snippets
1. Variant Matrix
Use drawers for filters, utility trays, and secondary task flows
Placement triggers
Use-case recipes
2. Interaction Playground
Tune placement, width, tone, and behavior for a live preview drawer
The preview renders a fresh Bootstrap offcanvas instance
whenever these controls change.
Live Output
End placement, soft tone, backdrop on.
Preview is embedded below and opens with Bootstrap
offcanvas behavior.
3. Placement and Sizing
Choose placement based on whether the drawer complements reading or blocks primary motion
Directional guidance
Start
End
Top / Bottom
4. State Modeling
Backdrop and scroll strategy determine whether the drawer feels modal or supplemental
Filter drawer with body scroll off
Preferred when users should focus on configuration before returning to the page.
Supplemental drawer with body scroll on
Use when the page should remain readable while the drawer is open.
5. Composition Patterns
Typical Lumora uses include bulk filters, record inspectors, and settings trays
Bulk filter drawer
Cluster filters into sections
Record inspector
Surface metadata without route changes
6. Real-use Snippets
Copy-ready offcanvas markup for common utility panels
End Drawer
<button class="btn btn-outline" type="button" data-bs-toggle="offcanvas" data-bs-target="#detailDrawer">
Open details
</button>
<div class="offcanvas offcanvas-end offcanvas-lumora" tabindex="-1" id="detailDrawer">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Record details</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">Drawer content.</div>
</div>
Filter Drawer
<div class="offcanvas offcanvas-end offcanvas-lumora offcanvas-lumora--soft" tabindex="-1" id="filterDrawer" data-bs-scroll="false" data-bs-backdrop="true">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Advanced filters</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">Form controls...</div>
</div>
Bottom Mobile Tray
<div class="offcanvas offcanvas-bottom offcanvas-lumora" tabindex="-1" id="mobileTray" data-bs-scroll="true">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Quick actions</h5>
</div>
<div class="offcanvas-body">Action shortcuts...</div>
</div>