Page Header

Give a workspace one clear title, concise context, and a stable region for page-level actions.

Operations

Review and act on current incidents.

Usage Example
@pageheader.PageHeader(pageheader.Config{
    Title:       "Operations",
    Description: "Review and act on current incidents.",
    Actions:     createIncidentAction(),
})

With breadcrumbs

Add hierarchical context above the title without changing the primary heading or action placement.

prod-us-east

12 services across three availability zones.

With breadcrumbs
@pageheader.PageHeader(pageheader.Config{
    Breadcrumbs: breadcrumbs.Breadcrumbs(breadcrumbs.Config{
        Items:   []breadcrumbs.Item{{Label: "Clusters", Href: "/clusters"}},
        Current: "prod-us-east",
    }),
    Title:       "prod-us-east",
    Description: "12 services across three availability zones.",
    Actions:     clusterActions(),
})

Custom title voice

TitleClass and TitleAttrs customize the h1 without replacing PageHeader's hierarchy and action layout.

Autumn journal

Editorial decisions for Issue 14.

Custom title voice
@pageheader.PageHeader(pageheader.Config{
    Title:       "Autumn journal",
    Description: "Editorial decisions for Issue 14.",
    TitleClass:  "font-mono tracking-tight",
    TitleAttrs:  templ.Attributes{"data-heading-voice": "editorial"},
})

Go API

v0.0.12

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/pageheader
Open v0.0.12 API