Figma header navigation components

The navbar is the one component every single visitor uses, and it gets judged in the first second. A clear header quietly promises that the rest of the site is organised; a cluttered one promises the opposite.

The 10 header navigation components and 397 variants above cover that first second properly, from a simple logo-links-CTA bar to full mega menus.

Anatomy of a header that works

The pattern is stable for a reason: logo on the left, a short list of top-level links, and the actions on the right, usually a log in link and a primary CTA.

The discipline is in the word "short". Every link added to the top level dilutes the others, so the navbar's job is to name five or six destinations well and push the depth into dropdowns.

The headers here hold that structure while covering the variations: simple bars, versions with dropdown triggers, and full-width layouts, each with hover and focused states on every nav item. These headers cover marketing sites specifically; app navigation is a different problem with its own application header components and sidebars.

23 dropdown and mega menu layouts

The dropdown is where header design actually gets hard, so this set includes 23 menu layouts: simple link lists, two, three, and four column arrangements, versions with footers and sidebars, featured card, image card, and video card layouts, blog post menus, and floating variants of the lot.

For sites with a lot to show, Nielsen Norman Group's mega menu research found the big panels genuinely outperform cramped dropdowns, because showing options at a glance beats making users hunt through cascading lists. Each layout is a component, so switching your product menu from a simple list to a mega menu with a featured article is a swap, not a rebuild, and the 23 layouts share spacing and type styles so any of them looks native under the same bar.

Mobile: the hamburger and what's behind it

Every header comes in a mobile version with open and closed states, including expanded subnavs behind the hamburger menu, plus logged-in variants that swap the CTA for an avatar.

Mobile menus fail in mockups because only the closed state gets designed; having the open state, and the state with a section expanded, means the tricky screens exist before a developer asks about them. It also keeps the mobile menu honest: if your five dropdowns don't survive the trip into a hamburger panel, better to learn that in Figma than in QA.

Sticky headers and hover menus in prototypes

The two recurring prototyping questions both have clean answers. For a sticky header, set the header's position to fixed in the prototype settings so it stays pinned while the page scrolls, per Figma's scroll behavior guide.

For menus that open on hover, use the "while hovering" trigger on the nav item, opening the dropdown layout of your choice. Hover and focused states are already designed on the nav items, so the prototype communicates interactivity rather than sitting inert.

When it's time to build, the same headers exist in code. Untitled UI React header navigations are open source, built with Tailwind CSS and React Aria, with keyboard-accessible menus and mobile behavior handled for you.