Breadcrumb

Navigation component that helps users understand their location within a website's hierarchy.

Source Tailwind CSS

package showcase

import "github.com/templui/templui/internal/components/breadcrumb"

templ BreadcrumbDefault() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{
					Href: "/",
				}) {
					Home
				}
			}
			@breadcrumb.Item() {
				@breadcrumb.Separator()
				@breadcrumb.Link(breadcrumb.LinkProps{
					Href: "/docs",
				}) {
					Documentation
				}
			}
			@breadcrumb.Item() {
				@breadcrumb.Separator()
				@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
					Components
				}
			}
		}
	}
}

Installation

templui add breadcrumb

Examples

With Icons

package showcase

import (
	"github.com/templui/templui/internal/components/breadcrumb"
	"github.com/templui/templui/internal/components/icon"
)

templ BreadcrumbWithIcons() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{
					Href: "/",
				}) {
					@icon.House(icon.Props{Size: 16})
					<span class="ml-1">Home</span>
				}
			}
			@breadcrumb.Item() {
				@breadcrumb.Separator()
				@breadcrumb.Link(breadcrumb.LinkProps{
					Href: "/docs",
				}) {
					@icon.FileText(icon.Props{Size: 16})
					<span class="ml-1">Documentation</span>
				}
			}
			@breadcrumb.Item() {
				@breadcrumb.Separator()
				@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
					@icon.Component(icon.Props{Size: 16})
					<span class="ml-1">Components</span>
				}
			}
		}
	}
}

Custom Separator

package showcase

import (
	"github.com/templui/templui/internal/components/breadcrumb"
	"github.com/templui/templui/internal/components/icon"
)

templ BreadcrumbCustomSeparator() {
	@breadcrumb.Breadcrumb() {
		@breadcrumb.List() {
			@breadcrumb.Item() {
				@breadcrumb.Link(breadcrumb.LinkProps{
					Href: "/",
				}) {
					Home
				}
			}
			@breadcrumb.Item() {
				@breadcrumb.Separator(breadcrumb.SeparatorProps{UseCustom: true}) {
					@icon.Slash(icon.Props{Size: 14})
				}
				@breadcrumb.Link(breadcrumb.LinkProps{
					Href: "/products",
				}) {
					Products
				}
			}
			@breadcrumb.Item() {
				@breadcrumb.Separator(breadcrumb.SeparatorProps{UseCustom: true}) {
					@icon.Slash(icon.Props{Size: 14})
				}
				@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
					Category
				}
			}
		}
	}
}

Responsive

package showcase

import "github.com/templui/templui/internal/components/breadcrumb"

templ BreadcrumbResponsive() {
	<!-- Mobile view (simplified with ellipsis) -->
	<div class="md:hidden">
		@breadcrumb.Breadcrumb() {
			@breadcrumb.List() {
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "/",
					}) {
						Home
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "#",
					}) {
						...
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
						Current Page
					}
				}
			}
		}
	</div>
	<!-- Desktop view (full breadcrumb) -->
	<div class="hidden md:block">
		@breadcrumb.Breadcrumb() {
			@breadcrumb.List() {
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "/",
					}) {
						Home
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "/category",
					}) {
						Category
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Link(breadcrumb.LinkProps{
						Href: "/category/subcategory",
					}) {
						Subcategory
					}
				}
				@breadcrumb.Separator()
				@breadcrumb.Item() {
					@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
						Current Page
					}
				}
			}
		}
	</div>
}

API Reference

Required parameter

Hover for description

Breadcrumb

Main breadcrumb navigation container component.

Name	Type	Default
`ID` Unique identifier for the breadcrumb element.	`string`	-
`Class` Additional CSS classes to apply to the breadcrumb.	`string`	-
`Attributes` Additional HTML attributes to apply to the breadcrumb element.	`templ.Attributes`	-

List

Breadcrumb list container for organizing breadcrumb items.

Name	Type	Default
`ID` Unique identifier for the list element.	`string`	-
`Class` Additional CSS classes to apply to the list.	`string`	-
`Attributes` Additional HTML attributes to apply to the list element.	`templ.Attributes`	-

Item

Individual breadcrumb item component.

Name	Type	Default
`ID` Unique identifier for the item element.	`string`	-
`Class` Additional CSS classes to apply to the item.	`string`	-
`Attributes` Additional HTML attributes to apply to the item element.	`templ.Attributes`	-
`Current` Whether this item represents the current page.	`bool`	`false`

Link

Clickable breadcrumb link component.

Name	Type	Default
`ID` Unique identifier for the link element.	`string`	-
`Class` Additional CSS classes to apply to the link.	`string`	-
`Attributes` Additional HTML attributes to apply to the link element.	`templ.Attributes`	-
`Href` URL destination for the breadcrumb link.	`string`	-

Separator

Visual separator between breadcrumb items.

Name	Type	Default
`ID` Unique identifier for the separator element.	`string`	-
`Class` Additional CSS classes to apply to the separator.	`string`	-
`Attributes` Additional HTML attributes to apply to the separator element.	`string`	-
`UseCustom` Whether to use custom separator content instead of default.	`bool`	`false`

Menu

Getting Started

Components

Breadcrumb

Installation

Examples

API Reference

List

Item

Link

Separator