PageHeader

The page title idiom, with breadcrumb and right slot.

Overview

One header shape for every route, so each page reads at the same weight.

Left aligned, no back link, no container. The sidebar is the back link and whitespace carries the grouping. The three testids the stable-app specs assert survive the port: page-header-title, page-header-subtitle, and page-header-breadcrumb.

Two rules are runtime facts, so the component warns in development instead of throwing: a title that ends in a period, and a breadcrumb tail that is not the title.

Title and subtitle

The title is the page-title text variant, an h1. The subtitle sits one step under it at half strength.

Strategies

Per-collateral risk parameters and the positions they govern.

import { PageHeader } from "@clear-labs/lens/next/page-header";

<PageHeader
  title="Strategies"
  subtitle="Per-collateral risk parameters and the positions they govern."
/>

Breadcrumb

Earlier segments link back. The tail is plain text and carries aria-current, and it has to equal the title.

pondSOL

Liquidation ratio, debt ceiling, and the queue.

<PageHeader
  title="pondSOL"
  subtitle="Liquidation ratio, debt ceiling, and the queue."
  breadcrumb={[
    { label: "Strategies", href: "/ez/strategies" },
    { label: "pondSOL" },
  ]}
/>

Right slot

The action for the page. List pages put their create link here. It aligns to the title's baseline, not the block's bottom, so the subtitle never moves it.

Strategies

Per-collateral risk parameters and the positions they govern.

＋ New strategy

import { ListCreateLink } from "@clear-labs/lens/next/list-page";

<PageHeader
  title="Strategies"
  subtitle="Per-collateral risk parameters and the positions they govern."
  right={
    <ListCreateLink href="/ez/strategies/new" testId="strategies-new-link">
      ＋ New strategy
    </ListCreateLink>
  }
/>

Props

titlestringrequired

The page label. A label, not a sentence: a trailing period logs a console warning in development.

subtitlestring

One line under the title at half strength.

rightReactNode

The action slot. It sits on the title's baseline, so it stays put with or without a subtitle.

breadcrumbBreadcrumbSegment[]

The trail above the title. Segments with an href link back, the last one is the current page and renders as text with aria-current. A tail that differs from the title logs a warning in development.