HeaderAction

A top navigation bar for action screens with close button, title, glass icon buttons, and optional action button.

npx chilli@latest add action-navigation

Create

Edit

Preview

Default

With border

With Border

Scrolled

New Action

Prop	Type	Default	Description
`title`	`string`	`"title"`	The title text displayed in the center.
`variant`	`"mobile" \| "desktop" \| "auto"`	`"auto"`	The breakpoint variant.
`border`	`boolean`	`false`	Whether to show a bottom border.
`scrolled`	`boolean`	`false`	Whether to show the scrolled state with backdrop blur.
`showClose`	`boolean`	`true`	Whether to show the close (X) button.
`onClose`	`() => void`	`—`	Callback when the close button is clicked.
`showButton`	`boolean`	`false`	Whether to show the action button (e.g. 'next').
`buttonLabel`	`string`	`"next"`	Label for the action button.
`actions`	`ReactNode`	`Share + More icons`	Custom action elements for the right side.