PROMPT_015 / NAVIGATION

NAVIGATION THAT STAYS QUIET.

A compact dark sidebar with a sliding active indicator and restrained hover behaviour.

BEST FOR: App shells and dashboards.
DIFFICULTY: Intermediate
TOOLS: Lovable · Cursor · Bolt

USE THIS IN LOVABLE

Build a compact dark sidebar navigation.

Structure: 64px collapsed / 240px expanded, product mark at top, grouped nav items with 11px uppercase monospace group labels, and a user block pinned at the bottom.

Behaviour: a single 2px active indicator that slides between items over 350ms cubic-bezier(0.22, 1, 0.36, 1) rather than fading per item; hover lightens the row background one step only; collapsing animates width with the same easing and shows tooltips for icon-only items.

Keyboard: full tab order, visible focus ring, and Escape closes any flyout. No colored highlights, no icon bounce.

---
Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.

RECOMMENDED INTERACTIONS.

DISCOVEREFFECTSPROMPTS

INTERACTION_027CSS

Navigation Underline

Underline grows from the origin side on hover.

Navigation / LightView

GLASS / SURFACE

Blur 24px · edge light

INTERACTION_010CSS

Glass Panel

Heavy dark glass with an inner edge highlight.

App UI / MediumView

RELATED PROMPTS.

All prompts

PROMPT_002 / LANDING PAGES

BUILD A LANDING PAGE THAT LOOKS HIRED.

A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.

premiumlanding-pagedark-ui

Preview

PROMPT_007 / GLASSMORPHISM

GLASS, BUT HEAVY AND DARK.

One disciplined glass treatment for floating surfaces only — not for every container.

glasspremiumdark-ui

Preview

PROMPT_010 / DASHBOARDS

A DASHBOARD THAT ISN'T A TEMPLATE.

Dark, dense, monochrome app UI with tabular numerals, quiet states and precise spacing.

dashboarddark-uisaas

Preview