∞ forever components

Navigation

Slide-in Drawer

Hamburger icon morphs to an X while a side panel slides in over a dark scrim, revealing four nav items with staggered fade-in animations.

csslight complexitymoderate motionclickmobile-ready

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

Mobile-style nav demos, workspace sidebars, or any UI needing a collapsible navigation drawer pattern.

When not to

Contexts where persistent navigation is required — the auto-cycle loop must be removed and the drawer wired to real routing before shipping. Autonomous preview ends at first deliberate input and never resumes.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the nav items to ['Home', 'Analytics', 'Team', 'Billing'], set the panel accent border to rgba(192,180,89,0.45), and increase animation delay step to 100ms. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • nav item labels (.c05-drawer__item text)
  • panel width (width:64%)
  • stagger delay step (80/150/220/290ms)
  • border glow color (--border-glow)
  • auto-cycle interval (2400ms) Autonomous preview ends at first deliberate input and never resumes.
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (@media + JS matchMedia check)
  • visibilitychange pause (stop on hidden)
  • scrim click-to-close handler
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

Known limitations

  • Auto-cycles every 2.4s by default — remove loop() call before production use
  • Drawer width hardcoded at 64% — may clip on very narrow viewports
  • Nav items use div not anchor tags — add href and keyboard focus styles for real nav
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

drawernavigationhamburgerslidestaggerui-patterndark-theme

More Navigation components

  • Magnify DockmacOS-style frosted-glass dock of six gradient tiles that scale up and lift toward the cursor; idle sweep that stops at first deliberate input keeps it…
  • Hamburger MorphThree-line hamburger button spring-morphs into a glowing teal X on click; button border gains teal glow when open. Auto-cycles as demo.
  • Gooey Tab BarPill-shaped tab bar with a vermillion blob that slides between tabs using a spring easing and SVG goo filter for liquid merge effect on dark surface.
  • Radial Fan MenuA core button rotates to an X and fans five glowing stone-toned icon petals outward in a staggered spring arc; auto-cycles open/close as a demo.
  • Underline FollowA glowing emerald-to-tan gradient underline slides and resizes to follow hovered nav links; wanders until first deliberate input across links when unhovered.
  • Sliding PillA 3-segment Day/Week/Month toggle where a glowing translucent pill slides between options with a spring bounce on a dark rounded bar.