sidebar off-canvas mobile panel slide animate mobile navigation show off-canvas settings panels handle temporary sidebar behavior mobile sidebars appear too abruptly off-canvas panels need a directional entrance app shells need a reusable slide-over transition
Sidebar Slide Over
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/sidebar-slide-over.json Background
Customize
Quick Start
<aside class="sidebar-slide-over" data-state="open">...</aside>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 813 bytes · 34 lines
- Custom Properties
-
--sidebar-offset--sidebar-duration--sidebar-ease - Classes
-
.sidebar-slide-over
sidebar off-canvas mobile panel slide
Apply .sidebar-slide-over to the moving panel. Use data-state="open" and data-state="closed" to toggle visibility, and data-side="right" for right-aligned sheets.