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. The shadcn demo collapses middle segments behind BreadcrumbEllipsis wrapped in a DropdownMenuTrigger (icon-only ghost) — click the dots to reach the hidden trail.

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

The primary demo mirrors shadcn's: Home, an ellipsis menu (Documentation / Themes / GitHub), Components, Breadcrumb.

open demo ↗

var menu = lotusui.DropdownMenuTrigger{
	Variant: lotusui.ButtonGhost, Icon: lotusui.IconMoreHorizontal, Size: lotusui.SizeSM, Width: 160,
}
menu.Layout(th, gtx, "",
	lotusui.DropdownMenuItem(th, &docs, "Documentation", false),
	lotusui.DropdownMenuItem(th, &themes, "Themes", false),
	lotusui.DropdownMenuItem(th, &github, "GitHub", false),
)

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")),
)

Dropdown

A trail label can open a menu — ghost DropdownMenuTrigger in the row (shadcn's "Dropdown" example).

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),
)

Collapsed

BreadcrumbEllipsis is the bare collapsed-depth mark (shadcn's "Collapsed"). Wire it to a menu as in Usage when the dots should reveal the hidden trail.

open demo ↗

lotusui.BreadcrumbEllipsis(th)

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 — compose with DropdownMenuTrigger{Icon: IconMoreHorizontal} for the interactive demo.