Skip to main content
Frontend Glossary

UI components · Page header

Page Header

Also called: Page title bar, Content header, Title area, PageHeader

The title area at the very top of the content area. It holds the current page's title, a short description, the breadcrumb, and the page's main action buttons.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Add a page header at the top of the content area. First line: a breadcrumb "Orders / Order details." Second line: on the left, a back arrow, the page title "Order SO-0918-0032" (20px bold, as an h1), and a "To ship" status tag; on the right, aligned with the title, two regular buttons "Print" and "More ⋯" and a primary button "Ship." Under the title, one line of 14px gray text: "Placed 2026-09-18 14:20 · Customer Emma Wilson." Below the header, add tabs "Overview / Shipping / Activity log," with 24px of space before the content. Below 768px wide, move the buttons to their own line under the title.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Page Header is what you need.

Use Page Header when

  • List, detail, and edit pages in admin apps, where users need to know which page they're on and which module it belongs to
  • When the page has one or two page-level main actions (New, Export, Ship) that need a fixed, visible spot
  • Detail pages that need to show the object's status, ID, or other key info next to the title

Pick something else when

  • A marketing home page that needs a big headline, big image, and call-to-action button to draw visitors in

    Use insteadHero Section

  • The logo, section links, and avatar shared by the whole site. Those go in the navbar.

    Use insteadNavbar

  • Small titles inside a dialog or drawer. Use their built-in title bar.

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Stuffing seven or eight buttons into the page header, so the title gets squeezed into an ellipsis and you can't tell which action is the main one

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    The page header repeating the same title and buttons as the navbar, wasting two rows of height

  3. 03

    A title that just says "Details" or "List," so you can't tell which object or page it is

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A breadcrumb (optional), a back button (optional), the page title, a status tag or subtitle, a line of description, and a group of action buttons on the right. Detail pages often have a row of tabs underneath.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

The page header sits at the top of the content area, below the navbar, and answers "which page is this, and what can I do here?" A common setup: a breadcrumb on the first line, then the page title (maybe with a back arrow and a status tag), a gray line of description under the title, and buttons for the whole page, like "New" or "Export," aligned with the title on the right. On detail pages, a row of tabs often hangs right below it.

It's easy to mix up with the Navbar. The navbar is a bar shared across the whole site that looks the same on every page and holds the logo and sections. The page header belongs to one page, so its title and buttons change from page to page. It's not a Hero Section either. A hero is the big headline, big image, and call-to-action button that fill the first screen of a landing page. An admin page header is only one or two lines tall and is there to give context.

Use one page header per page, and make its title the page's only h1. Show 2 to 3 buttons at most. Put the main action on the far right as a primary button and tuck the rest into a "More" menu. On long pages you can make the header sticky, but shrink it to a single line so it doesn't eat too much height.

Developer info
Term ID
component-page-header
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-page-header
  • .ant-pro-page-container-warp-page-header
  • .el-page-header
  • .arco-page-header
  • .n-page-header
  • .page-header
  • .content-header
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • page-header
  • page-head
  • page-title
  • page-heading
  • content-header
  • title-bar
  • view-header
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • PageHeader
  • PageTitle
  • PageHeading
  • ContentHeader
  • TitleBar
Semantic tags and roles

A weak signal. It only counts together with other cues.

  • <header>
Structure

Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.

  • starts with heading
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026