Breadcrumb
Navigation component that helps users understand their location within a website's hierarchy.
Source
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
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>
}