Skip to content

PageHeader

The top of every page: breadcrumbs on detail pages, h1, one-line description, actions, a row of facts and tabs.

LayoutServer-rendered

Examples

List page

Title, one-line description and the page action on the title line.

Servers

MCP servers your agents reach through one Switchboard URL.

Example
<PageHeader
  title="Servers"
  description="MCP servers your agents reach through one Switchboard URL."
  actions={<Button icon="plus">Add server</Button>}
/>

Detail page

Breadcrumbs (detail pages only), a lamp next to the title, meta facts and route tabs.

GitHubConnected

HTTPOAuthLast call 4 minutes ago
Example
<PageHeader
  breadcrumbs={[{ label: 'Servers', href: '/servers' }, { label: 'GitHub' }]}
  title="GitHub"
  titleAdornment={<Lamp state="live" label="Connected" />}
  meta={
    <>
      <Badge mono>HTTP</Badge>
      <Badge icon="key">OAuth</Badge>
      <span>Last call 4 minutes ago</span>
    </>
  }
  actions={
    <>
      <Button variant="secondary" icon="refresh">Test connection</Button>
      <IconButton icon="more-horizontal" label="More actions" variant="secondary" />
    </>
  }
  tabs={<LinkTabs label="Server sections" items={sections} />}
/>

Usage

Usage
import { PageHeader } from '@switchboard/ui'

<PageHeader
  title="Skills"
  description="Instructions and files your agents load on demand."
  actions={<Button icon="upload">Upload skill</Button>}
/>

Props

Every component also takes mix, for css() and mixins applied after its own style.

PageHeader

PageHeader props
PropTypeDefaultDescription
title*RemixNode–Page title, rendered as the h1.
descriptionRemixNode–One line under the title.
actionsRemixNode–Buttons on the title line; they wrap under the title on narrow screens.
breadcrumbsBreadcrumbItem[]–Trail above the title, on detail pages only. The last item is this page. Index pages have none.
metaRemixNode–Row of small facts under the description: lamp and state, badges, last call.
tabsRemixNode–Tabs or LinkTabs directly under the header.
titleAdornmentRemixNode–Next to the title, inside the h1: a Lamp or Badge.

Also accepts every <header> attribute.

Accessibility

  • Renders the page’s only <h1>; use it once per page.
  • titleAdornment sits inside the h1, so a Lamp’s label is read as part of the heading ("GitHub, Connected").
  • Breadcrumbs are a <nav aria-label="Breadcrumb"> list; the last item has aria-current="page".

Guidance

Do

  • Keep the description to one sentence about what the page is for.
  • Put the one primary action on the title line.
  • Use breadcrumbs only on detail pages; there is no back link.

Don’t

  • Add a second h1 elsewhere on the page.
  • Put more than three buttons in actions; move the rest into a menu.