navigation sidebar push slide mobile off-canvas sidebar push off-canvas slide shift mobile-nav sidebar push navigation off-canvas menu with content shift
Navbar Sidebar Push
Fetch pattern JSON:
curl https://webspire.de/patterns/navbar/sidebar-push.json sidebar-push.html
<div class="ws-navbar relative min-h-screen">
<!-- Sidebar -->
<aside id="push-sidebar" class="fixed top-0 left-0 z-40 h-full w-64 -translate-x-full bg-[var(--ws-navbar-bg)] text-white transition-transform duration-400 ease-out">
<div class="flex h-full flex-col justify-between p-6">
<div>
<a href="#" class="text-lg font-bold tracking-tight">Brand</a>
<nav class="mt-10">
<ul class="space-y-4">
<li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Home</a></li>
<li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">About</a></li>
<li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Services</a></li>
<li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Portfolio</a></li>
<li><a href="#" class="text-sm font-medium text-slate-300 hover:text-white transition-colors">Contact</a></li>
</ul>
</nav>
</div>
<div class="flex gap-4 text-xs text-slate-500">
<a href="#" class="hover:text-white transition-colors">Tw</a>
<a href="#" class="hover:text-white transition-colors">Li</a>
<a href="#" class="hover:text-white transition-colors">Ig</a>
</div>
</div>
</aside>
<!-- Overlay -->
<div id="push-overlay" class="fixed inset-0 z-30 bg-black/40 opacity-0 invisible transition-all duration-400"></div>
<!-- Main Content (pushes right when sidebar opens) -->
<div id="push-content" class="transition-transform duration-400 ease-out">
<header class="flex items-center justify-between px-6 py-4">
<button id="push-toggle" class="flex flex-col gap-1.5 cursor-pointer" aria-expanded="false" aria-label="Toggle sidebar">
<span class="block h-0.5 w-6 bg-current"></span>
<span class="block h-0.5 w-6 bg-current"></span>
<span class="block h-0.5 w-6 bg-current"></span>
</button>
<a href="#" class="text-xl font-bold tracking-tight">Brand</a>
<div></div>
</header>
<main class="px-6 py-12">
<h1 class="text-4xl font-bold">Page Content</h1>
<p class="mt-4 max-w-xl text-slate-600">The entire content area shifts to the right when the sidebar opens, maintaining context visibility with a partial push effect.</p>
</main>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
navigationsidebarpushslidemobileoff-canvas
Slots
| Name | Required | Description |
|---|---|---|
| brand | Yes | Logo or brand name inside sidebar. |
| navItems | Yes | Navigation links. |
| social | No | Social media links at sidebar bottom. |
| content | Yes | Main page content that gets pushed. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| side | 'left' | 'right' | left | Which side the sidebar slides from. |
| pushDistance | string | 16rem | How far content pushes (sidebar width). |