Skip to content
v0.2.7

Page Header

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

Default Rendered example

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.

With breadcrumbs Rendered example

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.

Custom title voice Rendered example

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.2.7

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.2.7 API
Toolbar