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 an ellipsis DropdownMenuTrigger (ghost icon-only, PopoverStart). For automatic collapse use BreadcrumbNav — same ITEMS_TO_DISPLAY rule as shadcn's responsive example.

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. Align the menu with PopoverStart so it opens under the dots, not centered.

open demo ↗

var menu = lotusui.DropdownMenuTrigger{
	Variant: lotusui.ButtonGhost, Icon: lotusui.IconMoreHorizontal,
	Size: lotusui.SizeSM, Width: 160, Align: lotusui.PopoverStart,
}
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, Align: lotusui.PopoverStart}
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 — or use BreadcrumbNav.

open demo ↗

lotusui.BreadcrumbEllipsis(th)

Responsive

BreadcrumbNav mirrors shadcn's responsive example: when the path is longer than ItemsToDisplay (default 3), the middle collapses into an ellipsis menu (items.slice(1, -2)). Below the theme md breakpoint the trail shows first+last only and labels truncate (max-w-20). Mobile Drawer is "from the web"; the ellipsis still opens a dropdown at every width.

open demo ↗

var nav lotusui.BreadcrumbNav
nav.Layout(th, gtx,
	lotusui.BreadcrumbSegLink(&home, "Home"),
	lotusui.BreadcrumbSegLink(&docs, "Documentation"),
	lotusui.BreadcrumbSegLink(&build, "Building Your Application"),
	lotusui.BreadcrumbSegLink(&fetch, "Data Fetching"),
	lotusui.BreadcrumbSegOf("Caching and Revalidating"),
)

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.
`BreadcrumbNav`	`struct`	Responsive trail: ItemsToDisplay (default 3), auto ellipsis menu, md truncate.
`BreadcrumbSeg / SegLink / SegOf / Segs`	`ctors`	Build-time segments for BreadcrumbNav.
`BreadcrumbLink / BreadcrumbPage`	`widget`	The composable pieces: clickable ancestor; current page.
`BreadcrumbSep(th, icon)`	`widget`	Between-items glyph; empty icon = the chevron.
`BreadcrumbEllipsis(th)`	`widget`	Bare collapsed-depth mark — prefer BreadcrumbNav or DropdownMenuTrigger{Icon, Align: PopoverStart} for interactive dots.