Back to Sections
Navbar
A sticky landing-page navbar — wordmark, link row with one dropdown submenu, CTA pair, and a below-md hamburger that opens a focus-trapped, scroll-locked mobile panel. Transparent over the hero, frosted once the page scrolls.
Sectionssectionnavbarheadernavigationmobile-menu
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react, shadcn/ui navigation-menu
Overview
Scroll state
Transparent over hero → bg-background/80 backdrop-blur-md past 24px
Mobile menu
Real focus trap, Esc closes, focus returns, body scroll locked
Dropdown
Base UI NavigationMenu popup — icon chip + label + description rows
One-accent discipline
Primary only on the CTA, the active-link underline, and focus rings