Figma application header navigation components

An application header does a different job from the navbar on a marketing site, and the two get confused constantly because from a distance they look identical. A marketing header sells: logo, five or six destinations, a log in link, and one big call to action aimed at someone who has never used the product.

An app header orients somebody who is already inside, opens it forty times a day, and needs to know where they are before they care where they could go. These 5 components and 80 variants are built for the second case.

App header or marketing navbar

The differences are concrete. App headers carry the account menu, notifications, and search, because a signed-in user wants those on every screen rather than on the home page. They mark the current section hard, since orientation beats persuasion once someone has already bought.

They rarely need mega menus, because the destinations are a fixed set rather than a content library that grows every week. And they compete directly with the sidebar for the same job, so most products pick one to lead and let the other go quiet. If you are designing the public site instead, marketing header navigations are a separate set with dropdown and mega menu layouts built for that job.

Four types, 64px to 128px

Simple is a single 64px bar at 1,440px: logo, nav items, actions. Tabs is 108px, a bar with a row of section tabs sitting under it, which is the shape you want when a product has a handful of top-level areas and each of those has sub-areas of its own.

Dual-tier and centered both stand at 128px and use two rows, buying room for more sections without cramming them onto one line. Those heights matter more here than on a marketing page, because this bar appears on every screen in the product, from the dashboard down, and every pixel it takes is one the actual work does not get.

The current state is most of the point

The nav item base is 38px tall and ships with a Current property crossed against default, hover, and focused states, so the active section is a variant rather than a manual override someone applied to one instance at 6pm. That distinction stops mattering right up until the active treatment changes and you have to find every hand-styled copy.

Nielsen Norman Group's article on location cues makes the case that designers keep making these signals too subtle, because they already know the structure and the user does not. In code the same idea lands as aria-current on the active link, which the W3C's tutorial on menu structure covers along with why the bar wants a labelled nav landmark.

There is also a nav button with an icon-only variant, 36px square, for the search and notification buttons at the right end.

Mobile: 56px closed, 812px open

Every type has a mobile version at 375px, 56px tall closed and 812px with the menu open, which makes it a full-height panel rather than a small dropdown. Both states being in the file is the difference between a mobile spec and a mobile guess, and the open state is where app navigation usually falls apart, because the section list, the account menu, and search all want the same screen at once.

The file also carries the sidebar layouts, so you can put the two side by side and decide which one your product should lead with before committing. Everything is drawn twice, light and dark.

When the build starts, the same bars exist in code. Untitled UI React header navigations are open source, built with Tailwind CSS and React Aria, with keyboard-accessible menus and the mobile panel behavior handled for you.