Back to Dictionary
Scroll & Navigation
●●○Customize
Use sparingly

Card Nav Expand

Use Card Nav Expand when navigation needs context; use Staggered Menu Open for a simpler menu list.

Use

Helping users choose among nested navigation options with short contextual cards.

Avoid

Avoid it when the nav is simple enough for direct links.

Safer Alternative

Drawer / Sidebar Slide

Risk Level

High attention

Timing

220-380ms for panel reveal; individual cards can stagger by 40-70ms.

Easing

Use ease-out for panel height and a subtle stagger for card opacity/y.

Risk

feels slowaccessibility sensitive

Live Demo

Product⌄

Overview

Templates

Integrations

What It Is

A navigation item expands into card-like panels that expose nested destinations with more context than a plain dropdown.

Decision Guidance

Use Card Nav Expand when navigation needs context; use Staggered Menu Open for a simpler menu list.

Best For

Helping users choose among nested navigation options with short contextual cards.

Avoid When

Avoid it when the nav is simple enough for direct links.

Timing

220-380ms for panel reveal; individual cards can stagger by 40-70ms.

Easing

Use ease-out for panel height and a subtle stagger for card opacity/y.

Risk Tags

feels slowaccessibility sensitive

Alternatives

Drawer / Sidebar SlideAccordion ExpandStaggered Menu Open

✓When to Use

  • Product nav with grouped destinations
  • Documentation or SaaS headers with feature families
  • Navigation where each destination benefits from a short description

✕When NOT to Use

  • Simple sites with only a few links
  • Mobile-only navigation without room for panels
  • Menus that must open instantly under heavy use

Configuration Tips

  • 01Keep panels aligned to the trigger so the source is obvious
  • 02Animate height/opacity but avoid layout jump in the header
  • 03Ensure hover and keyboard activation behave consistently

You've Seen It In

StripeVercelDocumentation hubs

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a header nav item that expands into three destination cards with titles and short descriptions. Animate the panel height and stagger the cards in.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function CardNavExpand({ open }: { open: boolean }) {
  const links = [
    ['Analytics', 'Track conversion and product usage'],
    ['Automations', 'Trigger workflows from events'],
    ['Integrations', 'Connect your existing stack'],
  ];

  return (
    <div className="relative inline-block">
      <button aria-expanded={open} className="rounded-full px-4 py-2 text-sm font-medium text-stone-800">Product</button>
      {open && (
        <div className="absolute left-0 top-full mt-3 grid w-80 gap-3 rounded-2xl border border-stone-200 bg-white p-3 shadow-xl">
          {links.map(([title, body]) => (
            <a key={title} href="#" className="rounded-xl border border-stone-200 bg-stone-50 p-3 transition hover:-translate-y-0.5 hover:bg-white">
              <span className="block text-sm font-semibold text-stone-900">{title}</span>
              <span className="mt-1 block text-xs leading-relaxed text-stone-500">{body}</span>
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

Related Effects

Drawer / Sidebar Slide

A panel that slides in from the left or right edge of the screen, pushing content or overlapping it with a dark backdrop.

Accordion Expand

A panel that smoothly grows in height to reveal hidden content, pushing the elements below it smoothly downwards.

Staggered Menu Open

A menu opens by revealing its items one after another, making the list structure readable without feeling like a sudden block of links.