Navigation

Build a floating pill navbar. Fixed position, top: 16px, centered horizontally with max-width 720px. Rounded-full, background rgba(10,10,12,0.6), backdrop-blur-xl, 1px border rgba(255,255,255,0.08). Inside: wordmark on the left, 4–5 nav links centered (Pricing, Docs, Customers, Blog, Changelog), and a single small CTA on the right ("Sign in" or "Get started" pill). Active link gets a subtle pill background and slightly brighter text. Hover transitions on every link (150ms ease). On scroll past 80px the navbar shrinks slightly and gains a stronger blur.

Build a Cmd+K command menu component. Trigger: Cmd/Ctrl+K opens, Esc closes. Render as a centered modal 640px wide, rounded-2xl, background #0b0b0d with a 1px border rgba(255,255,255,0.08) and a strong black shadow. Top: a large input (20px) with placeholder "Search or run a command…" and a small kbd badge "Esc" on the right. Below: scrollable groups - "Recent", "Pages", "Actions". Each with an uppercase tracking-widest 11px label. Each row: leading icon, 14px label, optional trailing kbd shortcut. Arrow keys cycle

Build a docs sidebar. Fixed left column 280px wide, full-height, background transparent over the page. Include a small search input at the top, then groups of links. Group labels uppercase tracking-widest 11px in ink-400. Each item: 14px, 6px vertical padding, hover background rgba(255,255,255,0.04). Active item has a 2px vertical bar on the left (#fafafa) and brighter text. Nested children indent by 16px. Scrollable independently with a thin custom scrollbar.

Build a hover-triggered mega menu. Top-level nav button reveals a centered panel (1040px wide, rounded-2xl, surface fill, strong shadow) on mouse enter with a 120ms hover-intent delay. Inside the panel: 4 columns of links, each with a small uppercase label and 5–6 14px rows (each row has a leading icon and a short subtitle). Far-right column: a featured card with image + headline + 'Read more →'. Animate panel with opacity + 6px slide-down on enter, reverse on leave. Esc closes; trap focus inside the panel.

Build a sticky top nav that shrinks on scroll. At rest: position sticky, top 0, padding-y 24px, transparent background. After window.scrollY > 80, add a class that reduces padding-y to 12px, sets background to rgba(10,10,12,0.7), adds backdrop-blur-xl, and shows a 1px bottom border in the line color. Transition all properties with 220ms ease. Wordmark left, nav links centered, CTA right. Mobile: collapses to a hamburger that opens a sheet.

Build a mobile hamburger overlay. Hamburger button (24px lines) in the top-right of the navbar. On tap: open a full-screen overlay that fades in (180ms) with a stagger-in (40ms) of nav links. Links rendered at 28px medium, stacked, with small ink-400 subtitles. A primary CTA button pinned to the bottom of the overlay above safe-area inset. Body scroll locks while open. Esc and tapping outside list area dismisses. Trap focus inside the overlay.

Build an icon rail sidebar. Fixed left strip 56px wide, full-height. Top: 36px workspace switcher avatar. Below: a vertical stack of 24px icon buttons with 16px vertical gaps, each rendering a tooltip on the right after a 400ms hover delay. Active item: 3px vertical accent bar on the left edge + icon color brightened. Bottom-anchored: user avatar with status dot and a settings gear above it. Background subtly darker than the page. Keyboard-navigable with Tab + arrow keys.

Build a mobile tab bar. Position fixed bottom 0, full-width, padding-bottom env(safe-area-inset-bottom), background bg with 1px top border. Five evenly-spaced tab buttons. Each tab: a 24px icon (outline by default, filled when active) stacked above an 11px label. Active tab uses the accent color for both icon and label. Optional center tab can be elevated +12px and rendered as a circular primary FAB. Add haptic feedback on tap if available.

Build a breadcrumb bar. Inline flex row with segments separated by a small '/' glyph in the muted color. Each segment is a Link with hover underline; the last segment is the current page in plain (non-link) text. For paths > 4 segments, collapse middle ones into a '…' that expands on click. Each segment can optionally render a small chevron caret on the right that, on click, opens a popover listing sibling resources for fast switching. Mono font for code-like IDs.

Build an announcement strip. 36px tall, full-width, sits above the main nav. Center-aligned content: small leading icon (sparkle, megaphone), short message in 13px, and a trailing 'Read more →' link with arrow. Right-anchored × dismiss button. When dismissed, store the announcement ID in localStorage so it won't reappear for that visitor. Animate the strip's enter with a slide-down from -100% over 200ms; dismiss reverses.