SiteHeader

Use it well.

Use one per page, above main. Menus are native details elements, so they work without scripts; on narrow screens links move into a full-width sheet. Mark the current section with Current; Section adds contextual links to the compact menu.

This is the source compiled for the preview. Select the text to copy it, or download the file. Change the package name and demo routes for your application.

package examples

import "github.com/Tend-Stack/TendUI/v2026/components"

templ ExampleSiteHeader() {
	@components.SiteHeader(components.SiteHeaderProps{
		Brand:      exampleSiteHeaderBrand(),
		BrandLabel: "Studio home",
		BrandHref:  "/catalog",
		Items: []components.SiteHeaderItem{
			{Label: "Docs", Href: "/catalog"},
			{Label: "Components", Href: "/catalog/siteheader", Current: true},
			{Label: "Examples", Href: "/dashboard", AllLabel: "All examples", Groups: []components.NavGroup{
				{Title: "Layouts", Items: []components.NavItem{{Label: "Dashboard", Href: "/dashboard"}, {Label: "Workspace", Href: "/workspace"}}},
				{Title: "Forms", Items: []components.NavItem{{Label: "Form lab", Href: "/forms"}, {Label: "Form wizard", Href: "/wizard"}}},
			}},
			{Label: "Playground", Href: "/playground"},
		},
		Actions: components.ThemeToggle(components.ThemeToggleProps{IconOnly: true}),
	})
	<main id="main">
		<p>One sticky header for every page. Narrow the window to see the compact menu.</p>
		<a href="/catalog/siteheader">Back to SiteHeader</a>
	</main>
}

templ exampleSiteHeaderBrand() {
	<span>Studio</span>
}