Back

Breadcrumb

Default Separator ( / )

With Icons

Truncation

Automatically collapses long paths using BreadcrumbTrail.

Max 3 items

Max 2 items

Usage

Use Breadcrumb for manual composition or BreadcrumbTrail to render from a slice with automatic truncation.

// Manual composition
@navigation.Breadcrumb(navigation.BreadcrumbProps{}) {
    @navigation.BreadcrumbItem(navigation.BreadcrumbItemProps{
        Label: "Home",
        Href: "/",
        Icon: homeIcon(),
    })
    @navigation.BreadcrumbSeparator("/")
    @navigation.BreadcrumbItem(navigation.BreadcrumbItemProps{
        Label: "Current",
        Current: true,
    })
}

// From slice with truncation
@navigation.BreadcrumbTrail(
    navigation.BreadcrumbProps{MaxItems: 3},
    []navigation.BreadcrumbItemProps{
        {Label: "Home", Href: "/"},
        {Label: "Docs", Href: "/docs"},
        {Label: "Breadcrumb", Current: true},
    },
)