Topbar

The product’s top bar — a rounded white card, level with the rail’s 24 inset at the top and with the body cards at its sides, never an edge-to-edge strip with sharp corners.

Beta · Shells and patterns · packages/css/src/components/topbar.css · React on Base UI: @pepperui/topbar

Shown in the shell above; alone here on the card ground.

Topbar — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• One component, 1200 × 72 for the specimen (1592 is the content width on the 1920 canvas); FILL between the rail and the right gutter
• Breadcrumb, Search (Input medium with a search glyph — it FILLs the bar between the breadcrumb and the controls, never narrower than 160, so nothing overflows in a narrow column; drop the date range below ~1000), Date range (Select medium), Action (a primary Button with a leading plus — the one primary on the page), Notifications (a Chip with a bell and a count), Avatar 36 — every part exposed; Has search / date range / action / notifications / avatar
• surface/slot (white) on radius/16, no stroke; padding space/24 at the sides, gap space/16
• 24 below it to the first row of cards

Use when a product screen — under the page’s top inset, beside the Sidebar.

Do not use when the site (Navigation menu); a slide; a dialog’s header; a card’s header (Card).

Relates to Sidebar, Breadcrumb, Input, Select, Button, Chip, Avatar, the Shells & navigation pattern page.

Anti-patterns two primary buttons in the bar · a page title in the bar (Heading pair belongs to the content) · an edge-to-edge strip · a search without its glyph.

Keywords: topbar, header bar, app header, toolbar, breadcrumb bar, page header

Figma — page Topbar: Topbar (1 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens topbar.css.

<header class="pui-topbar"><nav class="pui-breadcrumb">…</nav>
  <label class="pui-input-group pui-topbar__search"><span class="pui-icon pui-input-group__icon">…</span><input class="pui-input-group__control" placeholder="Search"></label>
  <button class="pui-select pui-topbar__control">…</button>
  <button class="pui-button"><span class="pui-icon pui-button__icon">…plus…</span>New campaign</button>
  <span class="pui-chip"><span class="pui-icon pui-chip__icon">…bell…</span>3</span>
  <span class="pui-avatar pui-avatar--blue">FK</span></header>
Without a search, put <div class="pui-topbar__spacer"></div> where it would be.

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #ffffff	8.24	4.5	text.muted on surface.page (promised)	ok
#110e56 on #d4d3f7	11.84	4.5	Blue avatar initials (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok
#ffffff on #0b0202	20.51	4.5	Primary button label (promised)	ok

4 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

3 of 3 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).