CSS Showcase · Live Demo
One nav. Many shapes per device.
Pick a device, then pick a design pattern for that device — top bar, left rail, or centered split on desktop; drawer or bottom tabs on mobile — all using container-type — no JS breakpoint listeners.
Featured demo
mobile · drawermobile design patterns
nav-drawer.css
/* Hamburger drawer */
.nav-links { display: none; }
.nav-burger { display: inline-flex; }
.nav-drawer {
transform: translateX(-100%);
transition: transform .3s ease;
}
.nav-drawer[data-open="true"] {
transform: translateX(0);
}CSS features used
- • Container queries
- • Transform drawer
- • aspect-ratio frames
- • data-* state
- • Semantic tokens
- • Smooth transitions