Responsive Nav Demo

Resize the browser to see the navigation toggle between desktop and mobile layouts.

• Desktop (>= 48 rem): horizontal nav in the header
• Mobile (< 48 rem): hamburger button + bottom tab bar
• Hamburger opens a dialog bottom sheet with full navigation

How it works

data-visible="desktop"

Hidden below 48 rem. Use on elements that should only appear on wider screens.

data-visible="mobile"

Hidden at 48 rem and above. Use on elements that should only appear on narrow screens.

nav.bottom

Sticky bottom tab bar with flex row layout, icon+label stacking, and safe-area padding.