breadcrumb

Oat documentation: https://oat.ink/components/breadcrumb/

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

Anatomy

A breadcrumb is a nav wrapper with list items for each path segment. Most apps render linked ancestors followed by a non-linked current page item. Separators are presentational and hidden from assistive tech.

Recipes

Basic breadcrumb

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

fn nav() {
  breadcrumb.breadcrumb([], [
    breadcrumb.link([attribute.href("/")], [html.text("Home")]),
    breadcrumb.chevron([]),
    breadcrumb.link([attribute.href("/docs")], [html.text("Docs")]),
    breadcrumb.chevron([]),
    breadcrumb.current([], [html.text("Breadcrumb")]),
  ])
}

Slash separators

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

fn nav() {
  breadcrumb.breadcrumb([], [
    breadcrumb.link([attribute.href("/")], [html.text("Home")]),
    breadcrumb.slash([]),
    breadcrumb.link([attribute.href("/settings")], [html.text("Settings")]),
    breadcrumb.slash([]),
    breadcrumb.current([], [html.text("Profile")]),
  ])
}

Values

</>

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

Render a breadcrumb navigation container.

Produces semantic markup:

<nav aria-label="breadcrumb">
inner ordered list <ol> containing breadcrumb items

chevron

</>

pub fn chevron(
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

current

</>

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

Render the current page item in the breadcrumb.

This is marked as the current location with:

role="link"
aria-disabled="true"
aria-current="page"

Use this for the last breadcrumb segment.

link

</>

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

Render a linked breadcrumb item.

This wraps an anchor in a list item so it participates correctly in the ordered breadcrumb structure.

separator

</>

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

Render a presentational breadcrumb separator element.

Use this when you want a custom separator glyph or icon. For accessibility, separators are hidden from assistive tech.

slash

</>

pub fn slash(
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)