Offcanvas Component Documentation
Offcanvas components provide slide-out panels that can be positioned from any side of the screen. They support both standard and floating variants.
Standard Offcanvas
Left Offcanvas:
<button data-tw-toggle="offcanvas" data-tw-target="#offcanvasLeft">Open Left</button>
<div id="offcanvasLeft" class="offcanvas offcanvas-left hidden ">
<div class="offcanvas-header">
Left Offcanvas
<button type="button" data-tw-dismiss="offcanvas" class="btn-dismiss">×</button>
</div>
<div class="offcanvas-body">
Content goes here...
</div>
</div>Right Offcanvas:
<button data-tw-toggle="offcanvas" data-tw-target="#offcanvasRight">Open Right</button>
<div id="offcanvasRight" class="offcanvas offcanvas-right hidden ">
<div class="offcanvas-header">
Right Offcanvas
<button type="button" data-tw-dismiss="offcanvas" class="btn-dismiss">×</button>
</div>
<div class="offcanvas-body">
Content goes here...
</div>
</div>Top Offcanvas:
<button data-tw-toggle="offcanvas" data-tw-target="#offcanvasTop">Open Top</button>
<div id="offcanvasTop" class="offcanvas offcanvas-top hidden">
<div class="offcanvas-header">
Top Offcanvas
<button type="button" data-tw-dismiss="offcanvas" class="btn-dismiss">×</button>
</div>
<div class="offcanvas-body">
Content goes here...
</div>
</div>Bottom Offcanvas:
<button data-tw-toggle="offcanvas" data-tw-target="#offcanvasBottom">Open Bottom</button>
<div id="offcanvasBottom" class="offcanvas offcanvas-bottom hidden">
<div class="offcanvas-header">
Bottom Offcanvas
<button type="button" data-tw-dismiss="offcanvas" class="btn-dismiss">×</button>
</div>
<div class="offcanvas-body">
Content goes here...
</div>
</div>Floating Offcanvas
Floating Left:
<button data-tw-toggle="offcanvas" data-tw-target="#offcanvasFloatLeft">Float Left</button>
<div id="offcanvasFloatLeft" class="offcanvas offcanvas-left offcanvas-float hidden">
<div class="offcanvas-header">
Floating Left Panel
<button type="button" data-tw-dismiss="offcanvas" class="btn-dismiss">×</button>
</div>
<div class="offcanvas-body">
This panel floats with a gap from the edge...
</div>
</div>Floating Right:
<button data-tw-toggle="offcanvas" data-tw-target="#offcanvasFloatRight">Float Right</button>
<div id="offcanvasFloatRight" class="offcanvas offcanvas-right offcanvas-float hidden">
<div class="offcanvas-header">
Floating Right Panel
<button type="button" data-tw-dismiss="offcanvas" class="btn-dismiss">×</button>
</div>
<div class="offcanvas-body">
Content with gap from screen edge...
</div>
</div>Floating Top:
<button data-tw-toggle="offcanvas" data-tw-target="#offcanvasFloatTop">Float Top</button>
<div id="offcanvasFloatTop" class="offcanvas offcanvas-top offcanvas-float hidden">
<div class="offcanvas-header">
Floating Top Panel
<button type="button" data-tw-dismiss="offcanvas" class="btn-dismiss">×</button>
</div>
<div class="offcanvas-body">
Content with rounded corners...
</div>
</div>Floating Bottom:
<button data-tw-toggle="offcanvas" data-tw-target="#offcanvasFloatBottom">Float Bottom</button>
<div id="offcanvasFloatBottom" class="offcanvas offcanvas-bottom offcanvas-float hidden">
<div class="offcanvas-header">
Floating Bottom Panel
<button type="button" data-tw-dismiss="offcanvas" class="btn-dismiss">×</button>
</div>
<div class="offcanvas-body">
Perfect for action sheets...
</div>
</div>Usage Instructions
Getting Started:
- Include the offcanvas CSS classes in your Tailwind build
- Add the offcanvas JavaScript component
- Use
data-tw-toggle="offcanvas"on trigger buttons - Set
data-tw-target="#yourOffcanvasId"to target specific offcanvas - Use
data-tw-dismiss="offcanvas"on close buttons
CSS Classes Reference
| Class | Description |
|---|---|
.offcanvas |
Base offcanvas class |
.offcanvas-left |
Slides in from the left |
.offcanvas-right |
Slides in from the right |
.offcanvas-top |
Slides in from the top |
.offcanvas-bottom |
Slides in from the bottom |
.offcanvas-float |
Adds gap from screen edges |
.offcanvas-show |
Shows the offcanvas (applied by JS) |