Skip to content
Sapphire UIv4.1.0

Site Header

Present the site brand and primary navigation. Use it at the top of public pages with mobile navigation for narrower screens.

Examples

Navigation

HTML markup

Authored custom-element markup. Register the element using Setup below. Demo buttons and their JavaScript handlers are omitted; use the methods and events in the API reference.

Attributes, methods and events

Native custom element: configure HTML attributes rather than React props. Boolean attributes use presence / absence. Registration is browser-only; server imports do not require a DOM and may export an undefined constructor.

Supported attributes read or observed by this element
Attribute
role
sticky
variant

Public methods: none declared by this entry.

Emitted custom events: none declared by this entry.

Setup

bun add @kongmy-dev/sapphire-ui

For an app using package components throughout, load the full stylesheet once. Add this element registration where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";
import "@kongmy-dev/sapphire-ui/elements/site-header";

Mixing package and vendored components? Follow application setup.

Search documentation