Figma page header components

Every screen in an application has to answer one question in its first hundred pixels: what is this, and what can I do here. The page header is where that answer lives.

Title on the left, a supporting line under it, the primary action on the right, and everything below that is the actual work. The 12 variants here cover that bar in six styles, at both breakpoints.

Where the breadcrumb stops and the header starts

A breadcrumb trail tells you where you sit in the hierarchy. The page header tells you what you are looking at now, and hands you the one action the screen exists for. They stack rather than substitute: the trail sits above the title, usually in the same container, and the title still has to make sense with the trail hidden.

Nielsen Norman Group's breadcrumb guidelines make the point sharply on mobile, where an oversized trail can push the thing you came for below the fold.

Keep the trail small, keep the title large, and treat them as separate components, which is how they ship here: breadcrumbs are their own set.

Six styles, and the 276px between them

The styles run simple, avatar, banner simple, banner simple centered, banner avatar, and banner avatar centered. Simple and avatar are bars: 117px tall on desktop, drawn at 1,216px, which is the content width inside a 1,440px page.

The banner styles run the full 1,440px and stand 393px tall, 517px for the centered version, and 549px for the centered banner with an avatar. That is a lot of vertical budget spent before any content appears, so the banner versions belong on profile, workspace, and account screens where identity is the point, and the plain bar belongs on every list and table screen where it is not.

Style and breakpoint are properties on one component, so moving from a plain title bar to a banner layout is a dropdown change on an instance rather than a new frame pasted in from somewhere else. The avatar versions put the image inline with the title on desktop without changing the row height at all, which is the quiet sign that the avatar was sized to the row rather than the row stretched to fit it.

What the mobile versions actually change

The simple header is 117px on desktop and 241px at 375px wide. That extra height is the action buttons dropping below the title instead of sitting beside it, which is the decision most teams make late and badly.

Having it settled in the file means a header with two buttons and a long title has a designed answer on a phone rather than a squeezed one. The avatar version lands at 217px on mobile, and the banner styles between 401px and 425px.

One page header per screen

Only one component on a screen should carry the page title and the primary action. Above it sits the application header navigation, which belongs to the product rather than the page, and everything under it steps down a level: section headers label the blocks inside the page, and card headers label a single card or table.

The discipline is the same one that applies to heading levels in markup, and the W3C's guidance on headings is a good reminder of why skipping a level leaves screen reader users guessing.

You can see the hierarchy holding up at full size in the dashboard and settings page examples, where the page header is the only thing that stays put while the body changes underneath it. A route that does not resolve is a different job again, covered by the 404 page headers.

Once the layout is settled, the same headers exist in code. Untitled UI React page headers are open source, built with Tailwind CSS and React Aria, with the responsive shift from a single row to a stacked layout already handled.