LargeTitleHeader

Scrolling region whose large title collapses into a compact sticky bar as it scrolls

Category: navigation · WCAG 2.2-AA · navigation, header, title, mobile, scroll, sticky, ios

States

expanded
collapsed

Props

Prop	Type	Default	Description
`title`	`string`	—	The page title, rendered as the large heading and mirrored in the compact bar
`children`	`React.ReactNode`	—	Content rendered inside the component.
`leading`	`React.ReactNode`	—	Leading slot of the compact bar — typically a back control
`actions`	`React.ReactNode`	—	Trailing slot of the compact bar — typically icon buttons
`level`	`1 \| 2 \| 3`	`1`	Heading level for the title, mapping to h1–h3.
`collapseDistance`	`number`	`48`	Scroll distance (px) over which the large title collapses into the bar.
`className`	`string`	—	Additional CSS class names merged onto the root element.

Design tokens

--cascivo-color-surface
--cascivo-color-foreground
--cascivo-border-subtle
--cascivo-text-ui
--cascivo-text-heading-lg
--cascivo-font-semibold
--cascivo-font-bold
--cascivo-leading-tight
--cascivo-target-min-coarse
--cascivo-z-raised

When to use

A scrolling screen that should keep its title reachable after the heading scrolls away
Mobile and tablet layouts following the platform convention of a large title that collapses
Any page where a persistent back control or actions must stay pinned while content scrolls

When not to use

A site-wide navigation bar with links and a brand — use Header
An application chrome header spanning a sidebar layout — use ShellHeader
A screen whose scroll container is owned by the app shell or router — this component owns its own

How to build an accessible LargeTitleHeader in React →

Examples

Basic

The component owns the scroll container; give it a parent with a height.

<LargeTitleHeader title="Library">
  <List>
    <ListItem>Recently Added</ListItem>
    <ListItem>Artists</ListItem>
    <ListItem>Albums</ListItem>
  </List>
</LargeTitleHeader>

With a back control and actions

Both slots stay in the compact bar and never scroll away.

<LargeTitleHeader
  title="Downloads"
  leading={<IconButton label="Back" onClick={goBack}>←</IconButton>}
  actions={<IconButton label="Sort">⇅</IconButton>}
>
  <FileList files={files} />
</LargeTitleHeader>

Longer collapse

Stretches the reveal over more scroll distance.

<LargeTitleHeader title="Recently Played" collapseDistance={96}>
  <TrackList tracks={tracks} />
</LargeTitleHeader>

Related components

Header — Site-wide banner with brand, links and actions rather than a page title
ShellHeader — Application chrome for a shell layout rather than a scrolling page
Dock — Bottom navigation for the same mobile app shell

← Back to docs