Live preview
The component fits into a framed product surface while preserving the spacing and link treatment from the library.
A header should orient, then get out of the way.
The API stays deliberately small: logo, links, and actions.
Navigation with the calm rhythm of a Zen garden.
SenHeader keeps brand, routes, and actions composed in one simple surface. Use it when the interface needs structure without visual noise.
Raked sand, clear paths, nothing competing for attention.
When it works best
Use SenHeader for documentation shells, dashboards, product marketing pages, and internal tools where route visibility matters more than elaborate navigation choreography.
What to customize
Pass a custom action cluster, adjust the header className, and let the logo image carry the brand. The component stays intentionally unopinionated about menus and account state.
Copy the structure and tune the surface.
The example below is the complete setup for logo, links, and a primary action.
<SenHeader
logoSrc="/logo.png"
logoAlt="MySite Logo"
links={[
{ label: 'Home', href: '/' },
{ label: 'Blog', href: '/blog' },
{ label: 'About', href: '/about' },
]}
actions={<SenButton variant="primary">Sign In</SenButton>}
/>