Breadcrumb

Default

{ui breadcrumb,
	items: [
		['title' => 'Home', 'href' => '/'],
		['title' => 'UI', 'href' => '/ui'],
		['title' => 'Elements', 'href' => '/ui/elements'],
		['title' => 'Breadcrumb'],
	],
/}

Each item is ['title' => 'Docs', 'href' => '/docs']. An item without an href is the current page: it is not a link and carries aria-current="page". The / between items is drawn by CSS, so it is not read out.

An item can also be a page, which becomes its title and URL, or a string, which becomes a title with no link and so is the current page. That is the items() function, shared by every element that takes a list. The list is yours to build, so a page can pass its own parents. label names the nav for screen readers, and attrs goes on the nav, so ['hx-boost' => 'true'] makes every link in the trail an HTMX request.

Param	Default	Description
items	[]	the trail: pages, strings or arrays like ['title' => 'Docs', 'href' => '/docs']; an item without href is the current page
label	'Breadcrumb'	the nav's accessible name
class	''	added to breadcrumb
attrs	[]	any other attributes, e.g. ['hx-boost' => 'true']

Params