Breadcrumb

<script>
  window.basecoat = window.basecoat || {};
  window.basecoat.registerDropdownMenu = function (Alpine) {
    if (Alpine.components && Alpine.components.dropdownMenu) return;

    Alpine.data("dropdownMenu", () => ({
      open: false,
      focusedIndex: null,
      menuItems: [],

      init() {
        this.$nextTick(() => {
          this.menuItems = Array.from(this.$el.querySelectorAll("[role=menuitem]:not([disabled]),[role=menuitemcheckbox]:not([disabled]),[role=menuitemradio]:not([disabled])"));
        });
      },
      focusMenuitem() {
        if (this.menuItems.length === 0) return;

        if (this.focusedIndex >= this.menuItems.length) {
          this.focusedIndex = this.menuItems.length - 1;
        } else if (this.focusedIndex < 0 || this.focusedIndex === null) {
          this.focusedIndex = 0;
        }
        this.menuItems.forEach((item) => item.blur());
        this.menuItems[this.focusedIndex].focus();
      },
      moveMenuitemFocus(delta) {
        if (this.menuItems.length === 0) return;

        let wasOpen = this.open;
        if (!this.open) {
          this.open = true;
          this.focusedIndex = 0;
        } else {
          this.focusedIndex = this.focusedIndex === null ? 0 : this.focusedIndex + delta;
        }

        if (wasOpen) {
          this.focusMenuitem();
        } else {
          setTimeout(() => this.focusMenuitem(), 50);
        }
      },
      handleMenuitemClick(event) {
        const menuitem = event.target.closest("[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]");
        if (menuitem && menuitem.getAttribute("aria-disabled") !== "true" && !menuitem.disabled) {
          this.$nextTick(() => {
            this.$refs.trigger.focus();
            this.open = false;
          });
        }
      },
      handleMenuitemMousemove(event) {
        const menuitem = event.target.closest("[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]");
        if (menuitem && menuitem.getAttribute("aria-disabled") !== "true" && !menuitem.disabled) {
          this.focusedIndex = this.menuItems.indexOf(menuitem);
          this.focusMenuitem();
        }
      },

      $trigger: {
        "@click"() {
          this.open = !this.open;
        },
        "@keydown.escape.prevent"() {
          this.open = false;
          this.$refs.trigger.focus();
        },
        "@keydown.down.prevent"() {
          this.moveMenuitemFocus(+1);
        },
        "@keydown.up.prevent"() {
          this.moveMenuitemFocus(-1);
        },
        "@keydown.home.prevent"() {
          this.focusMenuitem(0);
        },
        "@keydown.end.prevent"() {
          this.focusMenuitem(this.menuItems.length - 1);
        },
        "@keydown.enter.prevent"() {
          this.open = !this.open;
        },
        ":aria-expanded"() {
          return this.open;
        },
        "x-ref": "trigger",
      },
      $content: {
        "@click"(e) {
          this.handleMenuitemClick(e);
        },
        "@keydown.escape.prevent"() {
          this.open = false;
          this.$refs.trigger.focus();
        },
        "@keydown.down.prevent"() {
          this.moveMenuitemFocus(+1);
        },
        "@keydown.up.prevent"() {
          this.moveMenuitemFocus(-1);
        },
        "@keydown.home.prevent"() {
          this.focusMenuitem(0);
        },
        "@keydown.end.prevent"() {
          this.focusMenuitem(this.menuItems.length - 1);
        },
        "@mouseover"(e) {
          this.handleMenuitemMousemove(e);
        },
        ":aria-hidden"() {
          return !this.open;
        },
        "x-cloak": "",
      },
    }));
  };

  document.addEventListener("alpine:init", () => {
    window.basecoat.registerDropdownMenu(Alpine);
  });
</script>
<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>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="m9 18 6-6-6-6" /></svg>
  </li>
  <li class="inline-flex items-center gap-1.5">
    <div class="popover" x-data="dropdownMenu" @click.away="open = false" id="demo-breadcrumb-menu">
      <button type="button" aria-haspopup="menu" aria-expanded="false" x-bind="$trigger" id="demo-breadcrumb-menu-trigger" aria-controls="demo-breadcrumb-menu-menu" class="flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="1" />
          <circle cx="19" cy="12" r="1" />
          <circle cx="5" cy="12" r="1" />
        </svg>
      </button>

      <div data-popover aria-hidden="true" x-bind="$content" id="demo-breadcrumb-menu-menu">
        <nav role="menu">
          <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>
        </nav>
      </div>
    </div>
  </li>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="m9 18 6-6-6-6" /></svg>
  </li>
  <li class="inline-flex items-center gap-1.5">
    <a href="#" class="hover:text-foreground transition-colors">Components</a>
  </li>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-3.5"><path d="m9 18 6-6-6-6" /></svg>
  </li>
  <li class="inline-flex items-center gap-1.5">
    <span class="text-foreground font-normal">Breadcrumb</span>
  </li>
</ol>