basecoat/docs/src/components/breadcrumb.njk

---
layout: layouts/page.njk
title: Breadcrumb
description: Displays the path to the current resource using a hierarchy of links.
toc:
  - label: Usage
    id: usage
---

{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
{% from "dropdown-menu.njk" import dropdown_menu %}

<div class="alert mb-6">
  {% lucide "circle-alert" %}
  <h2>There is no dedicated breadcrumb component in Basecoat.</h2>
</div>

{% set code_script %}
<script>
{% fetchCode "src/js/dropdown-menu.js" %}

document.addEventListener('alpine:init', () => {
  window.basecoat.registerDropdownMenu(Alpine);
});
</script>
{% endset %}

{% set code_html %}
<ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
  <li class="inline-flex items-center gap-1.5">
    <a href="#" class="hover:text-foreground transition-colors">Home</a>
  </li>
  <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
  <li class="inline-flex items-center gap-1.5">
    {% set trigger %}
      {% lucide "ellipsis" %}
    {% endset %}
    {% call dropdown_menu(
      id="demo-breadcrumb-menu",
      trigger=trigger,
      trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"},
      register_on=["alpine:init", "htmx:afterSwap"]
    ) %}
      <nav role="menu">
        <button type="button" role="menuitem">Documentation</button>
        <button type="button" role="menuitem">Themes</button>
        <button type="button" role="menuitem">GitHub</button>
      </nav>
    {% endcall %}
  </li>
  <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
  <li class="inline-flex items-center gap-1.5">
    <a href="#" class="hover:text-foreground transition-colors">Components</a>
  </li>
  <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
  <li class="inline-flex items-center gap-1.5">
    <span class="text-foreground font-normal">Breadcrumb</span>
  </li>
</ol>
{% endset %}

{{ code_preview("dropdown-menu", code_script | prettyHtml ~ code_html | prettyHtml) }}

<h2 id="usage"><a href="#usage">Usage</a></h2>

<section class="prose">
  <p>The example above uses some simple Tailwind CSS along with the <a href="/components/dropdown-menu">Dropdown Menu</a>.</p>
</section>

{% from "tabs.njk" import tabs %}
{% set tabsets = [
  { tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
  { tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
] %}
{{ tabs(id="alert-dialog", tabsets=tabsets) }}