Breadcrumb

Breadcrumb

Navigation breadcrumbs to show the current page location.

12345678910111213141516171819202122
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ BreadcrumbDefault() {
	@popui.Breadcrumb() {
		@popui.BreadcrumbItem(props.BreadcrumbItem{
			Label: "Home",
			Href:  "/",
		})
		@popui.BreadcrumbItem(props.BreadcrumbItem{
			Label: "Products",
			Href:  "/products",
		})
		@popui.BreadcrumbItem(props.BreadcrumbItem{
			Label: "Electronics",
		})
	}
}

With Children

Use children instead of Label prop for custom content.

123456789101112131415161718192021222324
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ BreadcrumbWithChildren() {
	@popui.Breadcrumb() {
		@popui.BreadcrumbItem(props.BreadcrumbItem{
			Href: "/",
		}) {
			<span>🏠 Home</span>
		}
		@popui.BreadcrumbItem(props.BreadcrumbItem{
			Href: "/products",
		}) {
			<span>📦 Products</span>
		}
		@popui.BreadcrumbItem(props.BreadcrumbItem{}) {
			<span>💻 Electronics</span>
		}
	}
}

API Reference

Breadcrumb

Container component for breadcrumb navigation.

NameTypeDefaultDescription
ID string-Unique identifier for the breadcrumb element
Class string-Additional CSS classes to merge with breadcrumb styles
Attributes templ.Attributes-Additional HTML attributes (data-*, aria-*, etc.)

BreadcrumbItem

Individual breadcrumb item. Renders as a link if Href is provided, otherwise as plain text.

NameTypeDefaultDescription
ID string-Unique identifier for the breadcrumb item element
Class string-Additional CSS classes to merge with item styles
Attributes templ.Attributes-Additional HTML attributes (data-*, aria-*, etc.)
Label string-Text label for the breadcrumb item
Href templ.SafeURL-URL for the breadcrumb link. If empty, renders as plain text