Breadcrumb

The b.Breadcrumb constructor creates a breadcrumb.

Modifier	Action
`b.Centered`	Center the breadcrumb in its container
`b.Right`	Align the breadcrumb to the right
`b.ArrowSeparator`	Use an arrow (`→`) as the separator
`b.BulletSeparator`	Use a bullet (`•`) as the separator
`b.DotSeparator`	Use a dot (`·`) as the separator
`b.SucceedsSeparator`	Use a "succeeds" character (`≻`) as the separator
`b.Small`	Set size to small
`b.Medium`	Set size to medium
`b.Large`	Set size to large

Child	Action
`b.OnUl(...any)`	Apply children to the `<ul>` element
`b.OnNav(...any)`	Apply children to the `<nav>` element
`e.Class`, `e.Classer`, `e.Classeser` or `e.Styles`	Apply child to the `<nav>` element
`gomponents.Node`of type `gomponents.AttributeType`	Apply child to the `<nav>` element
`gomponents.Node`of type `gomponents.ElementType`	Apply child to the `<ul>` element
Anything else	Apply child to the `<ul>` element

The b.BreadcrumbEntry constructor creates a breadcrumb entry (which is a regular <li> element).

The b.BreadcrumbAHref constructor creates a breadcrumb link entry.

Modifier	Action
`b.Active`	Apply the active style and add the `aria-current="page"` attribute

Bulma examples

Bulma documentation

Example

Code

b.Breadcrumb(
	b.BreadcrumbEntry(
		e.AHref("#", "Bulma"),
	),
	b.BreadcrumbEntry(
		e.AHref("#", "Documentation"),
	),
	b.BreadcrumbEntry(
		e.AHref("#", "Components"),
	),
	b.BreadcrumbEntry(
		b.Active,
		e.AHref("#", e.AriaCurrentPage, "Breadcrumb"),
	),
)

ResultHTML

<nav class="breadcrumb" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li></ul></nav>

Bulma-Gomponents provides the b.BreadcrumbHref and b.BreadcrumbActiveAHrefhelpers for regular breadcrumb links:

Example

Code

b.Breadcrumb(
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Alignment

Bulma documentation

Example

Code

b.Breadcrumb(
	b.Centered,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb is-centered" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Example

Code

b.Breadcrumb(
	b.Right,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb is-right" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Icons

Bulma documentation

Example

Code

b.Breadcrumb(
	b.BreadcrumbAHref("#", fa.Icon(fa.Solid, "home"), "Bulma"),
	b.BreadcrumbAHref("#", fa.Icon(fa.Solid, "book"), "Documentation"),
	b.BreadcrumbAHref("#", fa.Icon(fa.Solid, "puzzle-piece"), "Components"),
	b.BreadcrumbAHref("#", b.Active, fa.Icon(fa.Solid, "thumbs-up"), "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb" aria-label="breadcrumbs"><ul><li><a href="#"><span class="icon"><i class="fa-solid fa-home"></i></span><span>Bulma</span></a></li><li><a href="#"><span class="icon"><i class="fa-solid fa-book"></i></span><span>Documentation</span></a></li><li><a href="#"><span class="icon"><i class="fa-solid fa-puzzle-piece"></i></span><span>Components</span></a></li><li><a class="is-active" href="#"><span class="icon"><i class="fa-thumbs-up fa-solid"></i></span><span>Breadcrumb</span></a></li></ul></nav>

Alternative separators

Bulma documentation

Example

Code

easy.Breadcrumb(
	b.ArrowSeparator,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Example

Code

b.Breadcrumb(
	b.BulletSeparator,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),

ResultHTML

<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Example

Code

b.Breadcrumb(
	b.DotSeparator,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Example

Code

b.Breadcrumb(
	b.SucceedsSeparator,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Sizes

Bulma documentation

Example

Code

b.Breadcrumb(
	b.Small,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb is-small" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Example

Code

b.Breadcrumb(
	b.Medium,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb is-medium" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>

Example

Code

b.Breadcrumb(
	b.Large,
	b.BreadcrumbAHref("#", "Bulma"),
	b.BreadcrumbAHref("#", "Documentation"),
	b.BreadcrumbAHref("#", "Components"),
	b.BreadcrumbAHref("#", b.Active, "Breadcrumb"),
)

ResultHTML

<nav class="breadcrumb is-large" aria-label="breadcrumbs"><ul><li><a href="#">Bulma</a></li><li><a href="#">Documentation</a></li><li><a href="#">Components</a></li><li><a class="is-active" href="#">Breadcrumb</a></li></ul></nav>