Page Header

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

Default Rendered example

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

Customize the heading with TitleClass and TitleAttrs. HideSeparator removes the bottom border while keeping the spacing.

Custom title voice Rendered example

Custom title voice

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

Heading help

Keep optional guidance beside the title in a keyboard-focusable help badge.

Heading help Rendered example

Heading help

@pageheader.PageHeader(pageheader.Config{
    Title: "Staging",
    TitleSuffix: tooltip.Help("staging-help", "About staging", "Review discovered services before pinning them."),
})

Go API

v0.4.0

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.4.0 API

Toolbar