Breadcrumbs

A trail of links leading back to the home of the current section; chevron or slash separators.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.Breadcrumbs

<Breadcrumbs.breadcrumbs
  home_href={~p"/"}
  items={[
    %{label: "Projects", href: ~p"/projects"},
    %{label: "Project Nero", href: ~p"/projects/nero"}
  ]}
/>

React (JSX)

import { Breadcrumbs } from "../ui/index.mjs"

<Breadcrumbs
  homeHref="/"
  items={[
    { label: "Projects", href: "/projects" },
    { label: "Project Nero", href: "/projects/nero" },
  ]}
  separator="chevron"
/>