Breadcrumb
Navigation component that helps users understand their location within a website's hierarchy.
package showcase
import "github.com/templui/templui/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 breadcrumbimport "github.com/templui/templui/components/breadcrumb"Examples
With Icons
package showcase
import (
"github.com/templui/templui/components/breadcrumb"
"github.com/templui/templui/components/icon"
)
templ BreadcrumbWithIcons() {
@breadcrumb.Breadcrumb() {
@breadcrumb.List() {
@breadcrumb.Item() {
@breadcrumb.Link(breadcrumb.LinkProps{
Href: "/",
}) {
@icon.House(icon.Props{Class: "size-4"})
<span class="ml-1">Home</span>
}
}
@breadcrumb.Item() {
@breadcrumb.Separator()
@breadcrumb.Link(breadcrumb.LinkProps{
Href: "/docs",
}) {
@icon.FileText(icon.Props{Class: "size-4"})
<span class="ml-1">Documentation</span>
}
}
@breadcrumb.Item() {
@breadcrumb.Separator()
@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
@icon.Component(icon.Props{Class: "size-4"})
<span class="ml-1">Components</span>
}
}
}
}
}
Custom Separator
package showcase
import (
"github.com/templui/templui/components/breadcrumb"
"github.com/templui/templui/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{Class: "size-3.5"})
}
@breadcrumb.Link(breadcrumb.LinkProps{
Href: "/products",
}) {
Products
}
}
@breadcrumb.Item() {
@breadcrumb.Separator(breadcrumb.SeparatorProps{UseCustom: true}) {
@icon.Slash(icon.Props{Class: "size-3.5"})
}
@breadcrumb.Page(breadcrumb.ItemProps{Current: true}) {
Category
}
}
}
}
}
Responsive
package showcase
import "github.com/templui/templui/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
Breadcrumb
Main breadcrumb navigation container component.
| Name | Type | Default |
|---|---|---|
Unique identifier for the breadcrumb element. | | - |
Additional CSS classes to apply to the breadcrumb. | | - |
Additional HTML attributes to apply to the breadcrumb element. | | - |
List
Breadcrumb list container for organizing breadcrumb items.
| Name | Type | Default |
|---|---|---|
Unique identifier for the list element. | | - |
Additional CSS classes to apply to the list. | | - |
Additional HTML attributes to apply to the list element. | | - |
Item
Individual breadcrumb item component.
| Name | Type | Default |
|---|---|---|
Unique identifier for the item element. | | - |
Additional CSS classes to apply to the item. | | - |
Additional HTML attributes to apply to the item element. | | - |
Whether this item represents the current page. | | |
Link
Clickable breadcrumb link component.
| Name | Type | Default |
|---|---|---|
Unique identifier for the link element. | | - |
Additional CSS classes to apply to the link. | | - |
Additional HTML attributes to apply to the link element. | | - |
URL destination for the breadcrumb link. | | - |
Separator
Visual separator between breadcrumb items.
| Name | Type | Default |
|---|---|---|
Unique identifier for the separator element. | | - |
Additional CSS classes to apply to the separator. | | - |
Additional HTML attributes to apply to the separator element. | | - |
Whether to use custom separator content instead of default. | | |