Dropdowns — Navigation flyout with descriptions

A compact navigation row opens a full-width flyout with icon tiles, description links and a muted footer. Use for a small set of product destinations.

ReactHTML

1440 × 480

Open in new tab

Component.tsx49 lines

export default function DropdownsNavFlyout() {
  return (
    <nav aria-label="Primary navigation" className="relative flex h-80 w-72 items-start gap-4 text-neutral-900 sm:w-96">
      <details open className="group">
        <summary className="flex h-9 cursor-pointer list-none items-center gap-1 rounded-md px-2 text-sm font-medium transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
          Product
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg>
        </summary>
        <div className="absolute top-9 left-0 mt-2 w-full overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-lg">
          <ul role="list" className="p-2">
          <li>
            <a href="#" className="flex items-center gap-3 rounded-md p-3 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-900">
              <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg></span>
              <span className="min-w-0">
                <span className="block text-sm font-semibold">Feature title</span>
                <span className="block text-sm text-neutral-500">Describe the main benefit</span>
              </span>
            </a>
          </li>
          <li>
            <a href="#" className="flex items-center gap-3 rounded-md p-3 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-900">
              <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M8 3v5M16 3v5M5 8h14v3a7 7 0 0 1-14 0V8M12 18v3" /></svg></span>
              <span className="min-w-0">
                <span className="block text-sm font-semibold">Integration title</span>
                <span className="block text-sm text-neutral-500">Describe connected tools</span>
              </span>
            </a>
          </li>
          <li>
            <a href="#" className="flex items-center gap-3 rounded-md p-3 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-900">
              <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5"><path d="M12 5v15M3 4h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5v15h-5a4 4 0 0 0-4 2 4 4 0 0 0-4-2H3z" /></svg></span>
              <span className="min-w-0">
                <span className="block text-sm font-semibold">Resource title</span>
                <span className="block text-sm text-neutral-500">Introduce helpful resources</span>
              </span>
            </a>
          </li>
          </ul>
          <div className="flex items-center justify-between gap-4 border-t border-neutral-200 bg-neutral-50 px-4 py-3 text-sm">
            <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">All features</a>
            <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Contact</a>
          </div>
        </div>
      </details>
      <a href="#" className="flex h-9 items-center rounded-md text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Pricing</a>
      <a href="#" className="flex h-9 items-center rounded-md text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Docs</a>
    </nav>
  )
}

Pattern notes

When to use: Use for a handful of navigation destinations that benefit from descriptions. Choose dropdowns-account-menu for identity links or tabs-link-overflow for counted peer pages. Variations: change the icon tiles, replace the footer with one help link, or use another primary navigation label.
Hierarchy: Read Product, Pricing and Docs first. The open Product flyout has three 14px semibold destination titles and 14px neutral-500 descriptions; icon tiles support scanning. Titles use up to 3 words, descriptions up to 28 characters and footer links up to 2 words. Navigation and list semantics remain native; the panel is a disclosure with plain links.
Responsive: Below 640px the root and flyout are 288px wide; from 640px they are 384px. The top row, three stacked destination rows and two-link footer retain their structure. Short descriptions fit the mobile text column without extra lines.
Layout: A relative navigation root is 288px (w-72) by 320px (h-80), growing to 384px (sm:w-96) wide at 640px. Three navigation items sit in a row with 16px gaps and 36px heights. The full-width flyout starts 8px below the row, with rounded-lg corners, a neutral-200 border, shadow-lg and overflow-hidden. An 8px-padded list holds three rows with 12px padding, 12px gaps, standard 40px icon tiles and two 14px text lines. A neutral-50 footer has a top divider, 16px horizontal and 12px vertical padding.
States: Product is open initially; its chevron rotates 180 degrees while open, and summary activation toggles the flyout. Summary hover fills neutral-50. Pricing, Docs and footer links are underlined and hover neutral-600; their focus outlines are 2px neutral-900 offset 2px. Flyout rows hover neutral-50 and show 2px inset outlines so overflow-hidden does not clip focus. No selected or disabled destinations are shown.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ [Product ^]     [Pricing]     [Docs]                 │
│ ┌──────────────────────────────────────────────┐     │
│ │ Icon tile  Feature title                     │     │
│ │            Short feature description         │     │
│ │ Icon tile  Integration title                 │     │
│ │            Connection description            │     │
│ │ Icon tile  Resource title                    │     │
│ │            Learning description              │     │
│ │ [All features]               [Contact]       │     │
│ └──────────────────────────────────────────────┘     │
└──────────────────────────────────────────────────────┘

View all

Dropdowns — Account menu with profile header
Layout tags: layered,icons,compact
Dropdowns — Action menu with sections and shortcuts
Layout tags: layered,icons,compact
Dropdowns — Breadcrumb branch disclosure
Layout tags: layered,list,compact

Dropdowns — Navigation flyout with descriptions

Pattern notes

More in Dropdowns

Dropdowns — Account menu with profile header

Dropdowns — Action menu with sections and shortcuts

Dropdowns — Breadcrumb branch disclosure