Breadcrumb

Displays the path to the current resource using a hierarchy of links.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/breadcrumb"	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu") templ BreadcrumbDemo() {	@breadcrumb.Breadcrumb() {		@breadcrumb.List() {			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#"}) {					Home				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@dropdownmenu.DropdownMenu() {					@button.Button(button.Props{						Size:       button.SizeIconSm,						Variant:    button.VariantGhost,						Attributes: dropdownmenu.Trigger(ctx),					}) {						@breadcrumb.Ellipsis()						<span class="sr-only">Toggle menu</span>					}					@dropdownmenu.Content(dropdownmenu.ContentProps{Align: dropdownmenu.AlignStart}) {						@dropdownmenu.Group() {							@dropdownmenu.Item() {								Documentation							}							@dropdownmenu.Item() {								Themes							}							@dropdownmenu.Item() {								GitHub							}						}					}				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#"}) {					Components				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Page() {					Breadcrumb				}			}		}	}}

Installation

shadcn-templ add breadcrumb

Copy and paste the following code into your project.

components/breadcrumb/breadcrumb.templ

package breadcrumb import (	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/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} type LinkProps struct {	ID         string	Class      string	Attributes templ.Attributes	Href       string} type SeparatorProps struct {	ID         string	Class      string	Attributes templ.Attributes} templ Breadcrumb(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	<nav		if p.ID != "" {			id={ p.ID }		}		data-slot="breadcrumb"		class={			utils.CN(				"cn-breadcrumb",				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 }		}		data-slot="breadcrumb-list"		class={			utils.CN(				"cn-breadcrumb-list flex flex-wrap items-center wrap-break-word",				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 }		}		data-slot="breadcrumb-item"		class={			utils.CN(				"cn-breadcrumb-item inline-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) }		}		data-slot="breadcrumb-link"		class={			utils.CN(				"cn-breadcrumb-link",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</a>} templ Separator(props ...SeparatorProps) {	{{ var p SeparatorProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<li		if p.ID != "" {			id={ p.ID }		}		data-slot="breadcrumb-separator"		role="presentation"		aria-hidden="true"		class={			utils.CN(				"cn-breadcrumb-separator",				p.Class,			),		}		{ p.Attributes... }	>		// The children ?? <ChevronRight/> of the reference: children render		// when the caller passed any, the icon fills the default case.		{{ childrenHTML, _ := templ.ToGoHTML(ctx, templ.GetChildren(ctx)) }}		if childrenHTML != "" {			@templ.Raw(childrenHTML)		} else {			@icon.ChevronRight(icon.Props{Class: "cn-rtl-flip"})		}	</li>} templ Page(props ...ItemProps) {	{{ var p ItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<span		if p.ID != "" {			id={ p.ID }		}		data-slot="breadcrumb-page"		role="link"		aria-disabled="true"		aria-current="page"		class={			utils.CN(				"cn-breadcrumb-page",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</span>} // Ellipsis marks collapsed breadcrumb items.templ Ellipsis() {	<span aria-hidden="true" data-slot="breadcrumb-ellipsis" role="presentation" class="cn-breadcrumb-ellipsis flex items-center justify-center">		@icon.Ellipsis()		<span class="sr-only">More</span>	</span>}

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb"

@breadcrumb.Breadcrumb() {	@breadcrumb.List() {		@breadcrumb.Item() {			@breadcrumb.Link(breadcrumb.LinkProps{Href: "/"}) {				Home			}		}		@breadcrumb.Separator()		@breadcrumb.Item() {			@breadcrumb.Link(breadcrumb.LinkProps{Href: "/docs/components"}) {				Components			}		}		@breadcrumb.Separator()		@breadcrumb.Item() {			@breadcrumb.Page() {				Breadcrumb			}		}	}}

Composition

Use the following composition to build a Breadcrumb:

breadcrumb.Breadcrumb└── breadcrumb.List    ├── breadcrumb.Item    │   └── breadcrumb.Link    ├── breadcrumb.Separator    ├── breadcrumb.Item    │   └── breadcrumb.Link    ├── breadcrumb.Separator    └── breadcrumb.Item        └── breadcrumb.Page

Basic

A basic breadcrumb with a home link and a components link.

package examples import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb"

package examples import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb" templ BreadcrumbBasic() {	@breadcrumb.Breadcrumb() {		@breadcrumb.List() {			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#"}) {					Home				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#"}) {					Components				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Page() {					Breadcrumb				}			}		}	}}

Custom separator

Pass custom children to breadcrumb.Separator to replace the default separator icon.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/breadcrumb"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ BreadcrumbSeparator() {	@breadcrumb.Breadcrumb() {		@breadcrumb.List() {			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/"}) {					Home				}			}			@breadcrumb.Separator() {				@icon.Dot()			}			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/docs/components"}) {					Components				}			}			@breadcrumb.Separator() {				@icon.Dot()			}			@breadcrumb.Item() {				@breadcrumb.Page() {					Breadcrumb				}			}		}	}}

You can compose breadcrumb.Item with a dropdownmenu to create a dropdown in the breadcrumb.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/breadcrumb"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ BreadcrumbDropdown() {	@breadcrumb.Breadcrumb() {		@breadcrumb.List() {			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/"}) {					Home				}			}			@breadcrumb.Separator() {				@icon.Dot()			}			@breadcrumb.Item() {				@dropdownmenu.DropdownMenu() {					<button class="flex items-center gap-1" { dropdownmenu.Trigger(ctx)... }>						Components						@icon.ChevronDown(icon.Props{Class: "size-3.5", Attributes: templ.Attributes{"data-icon": "inline-end"}})					</button>					@dropdownmenu.Content(dropdownmenu.ContentProps{Align: dropdownmenu.AlignStart}) {						@dropdownmenu.Group() {							@dropdownmenu.Item() {								Documentation							}							@dropdownmenu.Item() {								Themes							}							@dropdownmenu.Item() {								GitHub							}						}					}				}			}			@breadcrumb.Separator() {				@icon.Dot()			}			@breadcrumb.Item() {				@breadcrumb.Page() {					Breadcrumb				}			}		}	}}

Collapsed

We provide a breadcrumb.Ellipsis component to show a collapsed state when the breadcrumb is too long.

package examples import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb"

package examples import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb" templ BreadcrumbEllipsisDemo() {	@breadcrumb.Breadcrumb() {		@breadcrumb.List() {			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/"}) {					Home				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Ellipsis()			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "/docs/components"}) {					Components				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Page() {					Breadcrumb				}			}		}	}}

Link component

The breadcrumb.Link component renders a standard anchor. Set the Href prop to link a breadcrumb item.

package examples import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb"

package examples import "github.com/axadrn/shadcn-templ/v2/components/breadcrumb" templ BreadcrumbLink() {	@breadcrumb.Breadcrumb() {		@breadcrumb.List() {			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#link-component"}) {					Home				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Link(breadcrumb.LinkProps{Href: "#link-component"}) {					Components				}			}			@breadcrumb.Separator()			@breadcrumb.Item() {				@breadcrumb.Page() {					Breadcrumb				}			}		}	}}

API Reference

The Breadcrumb component is the root navigation element that wraps all breadcrumb components.

Prop	Type	Default
`Class`	`string`	-

List

The breadcrumb.List component displays the ordered list of breadcrumb items.

Prop	Type	Default
`Class`	`string`	-

Item

The breadcrumb.Item component wraps individual breadcrumb items.

Prop	Type	Default
`Class`	`string`	-

Link

The breadcrumb.Link component displays a clickable link in the breadcrumb.

Prop	Type	Default
`Href`	`string`	-
`Class`	`string`	-

Page

The breadcrumb.Page component displays the current page in the breadcrumb (non-clickable).

Prop	Type	Default
`Class`	`string`	-

Separator

The breadcrumb.Separator component displays a separator between breadcrumb items. Pass custom children to override the default separator icon.

Prop	Type	Default
`Class`	`string`	-

Ellipsis

The breadcrumb.Ellipsis component displays an ellipsis indicator for collapsed breadcrumb items.

Prop	Type	Default
`Class`	`string`	-

Badge Button

On This Page

Installation Usage Composition Basic Custom separator Dropdown Collapsed Link component API Reference Breadcrumb List Item Link Page Separator Ellipsis

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.