breadcrumb

Basecoat documentation: https://basecoatui.com/components/breadcrumb/

The breadcrumb helpers render hierarchical navigation for showing where a user is in the app and how to move back up.

Anatomy

Use breadcrumb as the ordered list container. Each step is typically an item link, followed by a current element.

Recipe

import glaze/basecoat/breadcrumb
import lustre/attribute
import lustre/element/html

fn nav_breadcrumb() {
  html.nav([attribute.aria_label("Breadcrumb")], [
    breadcrumb.breadcrumb([], [
      breadcrumb.item([attribute.href("/")], [html.text("Home")]),
      breadcrumb.separator([]),
      breadcrumb.item([attribute.href("/docs")], [html.text("Documentation")]),
      breadcrumb.separator([]),
      breadcrumb.current([], [html.text("Components")]),
    ])
  ])
}

Values

</>

pub fn breadcrumb(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

current

</>

pub fn current(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

item

</>

pub fn item(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

separator

</>

pub fn separator(
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

with_items

</>

pub fn with_items(
  items: List(#(String, String, Bool)),
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)