Breadcrumb

Breadcrumb shows the current page trail.

github.com/fastygo/templ/components

Summary

Breadcrumb shows the current page trail.Breadcrumb sets aria-current on the active item.

Use Cases

Show docs hierarchy above page title

Mark the current page without a link

Semantics

Root element is nav

AriaLabel and DataUI8Kit are explicit opt-in props

Items render as ol li elements

Href renders anchor when link is enabled

Example layout.standard

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Breadcrumb(cmp.BreadcrumbProps{
		AriaLabel: "Breadcrumb",
		Items: []cmp.BreadcrumbItem{
			{Label: "Home", Href: "/"},
			{Label: "Docs", Href: "/docs"},
			{Label: "Button", Current: true},
		},
	})
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Breadcrumb(cmp.BreadcrumbProps{
		AriaLabel: "Breadcrumb",
		Items: []cmp.BreadcrumbItem{
			{Label: "Home", Href: "/"},
			{Label: "Docs", Href: "/docs"},
			{Label: "Button", Current: true},
		},
	})
}

Example state.disabled

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Breadcrumb(cmp.BreadcrumbProps{
		AriaLabel: "Breadcrumb",
		Items: []cmp.BreadcrumbItem{
			{Label: "Home", Href: "/"},
			{Label: "Locked", Disabled: true},
		},
	})
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Breadcrumb(cmp.BreadcrumbProps{
		AriaLabel: "Breadcrumb",
		Items: []cmp.BreadcrumbItem{
			{Label: "Home", Href: "/"},
			{Label: "Locked", Disabled: true},
		},
	})
}

API

AriaLabel · string — role: accessible-name

Attrs · templ.Attributes — role: html-attrs

Class · string — role: style-extension

DataUI8Kit · string — role: behavior-hook

Items · []BreadcrumbItem — role: trail