Site Header

Block

A sticky site header that transitions from transparent to solid on scroll. Includes a transparent/solid mode switch, mobile Sheet navigation, and supports logo, nav links, and account menu slots.

core/site-header

Installation

1 · Add registry to components.json

2 · Install component

Examples

Solid mode

Standard opaque header with nav and account menu.

API Reference

Prop	Type	Default	Description
`id`req	`string`	—	Element ID used by useHeaderStyleSync to imperatively control data-style.
`data-style`	`"transparent" \| "solid" \| "boot"`	`"solid"`	Controls header appearance. Usually managed by useHeaderStyleSync.