HeaderNavigation

A top navigation bar for pages with back button, title, and action icons, supporting mobile and desktop breakpoints.

npx chilli@latest add page-navigation

Profile

Settings

Activity

Default (transparent)

Default

With border

With Border

Scrolled (opaque background)

Scrolled

No Back

Prop	Type	Default	Description
`title`	`string`	`"title"`	The title text displayed in the center.
`variant`	`"mobile" \| "desktop" \| "auto"`	`"auto"`	The breakpoint variant. Auto adapts based on screen size.
`border`	`boolean`	`false`	Whether to show a bottom border.
`scrolled`	`boolean`	`false`	Whether to show the scrolled state with opaque background.
`showBack`	`boolean`	`true`	Whether to show the back button.
`onBack`	`() => void`	`—`	Callback when the back button is clicked.
`actions`	`ReactNode`	`Share + Settings icons`	Custom action elements for the right side.