Breadcrumb

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

TailwindCSS

package showcase

import "github.com/axzilla/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

Copy and paste the following code into your project:

package breadcrumb

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

type Props struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type ListProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
}

type ItemProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Current    bool
}

type LinkProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Href       string
}

type SeparatorProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	UseCustom  bool
}

templ Breadcrumb(props ...Props) {
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<nav
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex",
				p.Class,
			),
		}
		aria-label="Breadcrumb"
		{ p.Attributes... }
	>
		{ children... }
	</nav>
}

templ List(props ...ListProps) {
	{{ var p ListProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<ol
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex items-center flex-wrap gap-1 text-sm",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</ol>
}

templ Item(props ...ItemProps) {
	{{ var p ItemProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<li
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"flex items-center",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</li>
}

templ Link(props ...LinkProps) {
	{{ var p LinkProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<a
		if p.ID != "" {
			id={ p.ID }
		}
		if p.Href != "" {
			href={ templ.SafeURL(p.Href) }
		}
		class={
			utils.TwMerge(
				"text-muted-foreground hover:text-foreground hover:underline flex items-center gap-1.5 transition-colors",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</a>
}

templ Separator(props ...SeparatorProps) {
	{{ var p SeparatorProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<span
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"mx-2 text-muted-foreground",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		if p.UseCustom {
			{ children... }
		} else {
			@icon.ChevronRight(icon.Props{Size: 14, Class: "text-muted-foreground"})
		}
	</span>
}

templ Page(props ...ItemProps) {
	{{ var p ItemProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<span
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"font-medium text-foreground flex items-center gap-1.5",
				p.Class,
			),
		}
		aria-current="page"
		{ p.Attributes... }
	>
		{ children... }
	</span>
}

Update the import paths to match your project setup.

Examples

With Icons

package showcase

import (
	"github.com/axzilla/templui/internal/components/breadcrumb"
	"github.com/axzilla/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/axzilla/templui/internal/components/breadcrumb"
	"github.com/axzilla/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/axzilla/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>
}