Navbar With Dropdown Menu
Original · freeA navbar featuring a JS-free product dropdown built with native details and summary, revealing a two-item mega-menu panel with icons.
Copy prompt gives Claude Code, Cursor or v0 a ready-to-paste prompt that recreates this exact component.
npx shadcn@latest add https://webinnoventix.com/r/navbar-dropdown-details.jsonexport default function NavbarDropdownDetails() {
return (
<section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
<header className="mx-auto max-w-6xl">
<nav
aria-label="Primary"
className="flex items-center justify-between gap-6 rounded-xl bg-slate-50 px-5 py-3 dark:bg-zinc-900"
>
<a
href="#"
className="flex items-center gap-2 text-lg font-semibold tracking-tight text-slate-900 dark:text-white"
>
<span className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-rose-600 text-white">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
className="h-5 w-5"
>
<path d="M12 3v18" />
<path d="M5 8l7-4 7 4" />
<path d="M5 8v8l7 4 7-4V8" />
</svg>
</span>
Junction
</a>
<ul className="flex items-center gap-2 text-sm font-medium text-slate-600 dark:text-slate-300">
<li className="relative hidden md:block">
<details className="group [&_summary::-webkit-details-marker]:hidden">
<summary className="flex cursor-pointer list-none items-center gap-1.5 rounded-lg px-3 py-2 transition hover:bg-slate-200/70 hover:text-slate-900 dark:hover:bg-zinc-800 dark:hover:text-white">
Product
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
className="h-4 w-4 transition group-open:rotate-180"
>
<path d="M6 9l6 6 6-6" />
</svg>
</summary>
<div className="absolute left-0 top-full z-10 mt-2 w-64 rounded-xl border border-slate-200 bg-white p-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
<a
href="#"
className="flex items-start gap-3 rounded-lg p-3 transition hover:bg-slate-50 dark:hover:bg-zinc-800"
>
<span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-rose-100 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
className="h-4 w-4"
>
<rect x="3" y="3" width="18" height="18" rx="2" />
<path d="M3 9h18M9 21V9" />
</svg>
</span>
<span>
<span className="block font-semibold text-slate-900 dark:text-white">
Dashboard
</span>
<span className="block text-xs text-slate-500 dark:text-slate-400">
Track everything in one view
</span>
</span>
</a>
<a
href="#"
className="flex items-start gap-3 rounded-lg p-3 transition hover:bg-slate-50 dark:hover:bg-zinc-800"
>
<span className="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-rose-100 text-rose-600 dark:bg-rose-500/15 dark:text-rose-400">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
className="h-4 w-4"
>
<path d="M3 3v18h18" />
<path d="M7 15l4-4 3 3 5-6" />
</svg>
</span>
<span>
<span className="block font-semibold text-slate-900 dark:text-white">
Analytics
</span>
<span className="block text-xs text-slate-500 dark:text-slate-400">
Reports that answer questions
</span>
</span>
</a>
</div>
</details>
</li>
<li className="hidden md:block">
<a
href="#"
className="rounded-lg px-3 py-2 transition hover:bg-slate-200/70 hover:text-slate-900 dark:hover:bg-zinc-800 dark:hover:text-white"
>
Pricing
</a>
</li>
<li className="hidden md:block">
<a
href="#"
className="rounded-lg px-3 py-2 transition hover:bg-slate-200/70 hover:text-slate-900 dark:hover:bg-zinc-800 dark:hover:text-white"
>
Docs
</a>
</li>
<li>
<a
href="#"
className="rounded-lg bg-rose-600 px-4 py-2 font-semibold text-white shadow-sm transition hover:bg-rose-500"
>
Sign up
</a>
</li>
</ul>
</nav>
</header>
</section>
);
}Dependencies
Licence
Built by Web Innoventix. Free for personal and commercial use, no attribution required.
Built by Web Innoventix
Need a custom interface, a full website, or SEO that gets you cited by AI? We design, build and rank it end to end.
Get a free quoteSimilar components
Browse all →
Centred Logo Navbar
OriginalA three-column navbar with the brand logo centred between the primary links and the account actions, wrapped in a soft rounded card.
Left Logo Navbar With CTA
OriginalA classic left-aligned logo navbar with centred navigation links and a prominent pill call-to-action button on the right.
Glass Transparent Navbar
OriginalA frosted glass navbar floating over a colourful gradient hero backdrop, using backdrop blur and translucent borders for a modern overlay header.
Responsive Navbar with Mobile Menu
MITA marketing site header with a logo, inline nav links, login/register buttons, and a working hamburger toggle that reveals a stacked mobile menu below the md breakpoint. Fully keyboard/ARIA accessible with light and dark variants.
Underline Tabs
MITAn accessible underline-style tab switcher with a bottom-border active indicator and a live content panel. State-driven with proper role=tablist/tab/tabpanel and aria-selected wiring, styled for light and dark modes.
Split Button Dropdown Menu
MITA split-button control with a chevron trigger that opens a divided action menu, including a destructive delete item. Closes on outside-click and Escape, with a rotating chevron and full ARIA menu roles for both light and dark themes.
Spotlight Hero
OriginalA centred hero with a soft radial spotlight, badge and dual call-to-action.
Split Hero
OriginalA two-column hero pairing a headline and CTAs with a product mock and social proof.
Gradient Spotlight Hero
OriginalA minimal centred hero with a soft gradient-mesh backdrop, announcement pill and dual call-to-action buttons.
App Preview Hero
OriginalA centred hero that pairs headline copy with a realistic product dashboard mock built entirely from markup, complete with browser chrome and a floating notification card.
Waitlist Capture Hero
OriginalA dark, focused hero with an inline email capture form and avatar social proof, ready for pre-launch waitlists.
Image Backdrop Hero
OriginalA cinematic full-bleed hero with a layered image-style backdrop, overlaid left-aligned copy and a trusted-by logos strip.