Vibe Design Reference v1

Home / Navigation

Chapter 04 · 14 entries

Navigation.

How users find their way around your website. Good navigation is invisible — users don't notice it because they always know where they are and how to get where they want.

Transparent at the top, frosted glass after a small scroll. Apple-style.

Hamburger / Mobile Menu

Three lines → X. Fullscreen overlay with staggered link reveals.

Multi-column hover dropdown with a featured image panel. ASOS-style.

Vertical dots on the right. Active dot pulses, hover shows section name.

Home › Category › Subcategory. Tiny, muted, essential for deep sites.

Swap panels without leaving the page. Sliding animated underline.

Command Palette (Cmd+K)

Press ⌘K — searchable launcher with arrow-key nav. Linear/Raycast pattern.

Floating Pill Nav

Frosted-glass island that floats over the hero with springy accent marker.

Smart-truncated page numbers + an animated-pill compact variant.

iOS dock with badges and active pip indicator. Phone-mockup demo.

Stepper / Progress

Multi-step signup with done/current/future states and connector lines.

Animated Link Underlines

Six pure-CSS hover treatments: slide, reveal, swap, marker, squiggle, arrow.

Footer Mega-Menu

Sprawling sitemap footer with newsletter, status indicator, socials.

Slide-out Drawer

Left nav drawer + right cart/filter drawer with overlay and Esc.