Breadcrumb

The path to the current page: muted ancestors, chevrons, current in ink.

Ancestor labels in muted ink separated by chevrons; the last label is the current page and never interactive. Pass clickables to make ancestors navigate.

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add breadcrumb

Usage

open demo ↗

lotusui.Breadcrumb(th, []*widget.Clickable{&home, &comps},
	"Home", "Components", "Breadcrumb")

Custom separator

The composable pieces — BreadcrumbLink, BreadcrumbPage, BreadcrumbSep — build custom trails; pass any icon as the separator.

open demo ↗

layout.Flex{Alignment: layout.Middle}.Layout(gtx,
	layout.Rigid(lotusui.BreadcrumbLink(th, &home, "Home")),
	layout.Rigid(lotusui.BreadcrumbSep(th, lotusui.IconDot)),
	layout.Rigid(lotusui.BreadcrumbPage(th, "Breadcrumb")),
)

Ellipsis

BreadcrumbEllipsis marks collapsed depth.

open demo ↗

lotusui.BreadcrumbEllipsis(th)

Dropdown

A trail item can open a menu — a ghost DropdownMenuTrigger in the row.

open demo ↗

var menu = lotusui.DropdownMenuTrigger{Variant: lotusui.ButtonGhost, Width: 160}
menu.Layout(th, gtx, "Components",
	lotusui.DropdownMenuItem(th, &docs, "Documentation", false),
	lotusui.DropdownMenuItem(th, &themes, "Themes", false),
)

API

Option	Type	Description
`btns`	`[]*widget.Clickable`	Index-aligned; makes ancestor labels clickable, nil = static.
`labels`	`...string`	The path; the LAST label is the current page, never interactive.
`BreadcrumbLink / BreadcrumbPage`	`widget`	The composable pieces: clickable ancestor; current page.
`BreadcrumbSep(th, icon)`	`widget`	Between-items glyph; empty icon = the chevron.
`BreadcrumbEllipsis(th)`	`widget`	Collapsed-depth mark.