Breadcrumb

A trail rendered from an array. The current page is derived from activeId, so it shows as plain text with aria-current="page" while the rest stay clickable.

Markup

<ol>
  <template data-each="crumbs" data-key="id">
    <li>
      <button data-show="!current(item.id)" @click="go" data-bind="data-id:item.id" data-text="item.label"></button>
      <span data-show="current(item.id)" aria-current="page" data-text="item.label"></span>
      <span data-show="!current(item.id)">/</span>
    </li>
  </template>
</ol>

Component

Micra.define("breadcrumb", {
  state: {
    activeId: 4,
    crumbs: [
      { id: 1, label: "Home" },
      { id: 2, label: "Projects" },
      { id: 3, label: "Micra" },
      { id: 4, label: "Settings" },
    ],
  },
  current(id) {
    return this.state.activeId === id;
  },
  go(e) {
    const id = Number(e.currentTarget.dataset.id);
    this.state.activeId = id;
    this.state.crumbs = this.state.crumbs.filter((c) => c.id <= id);
  },
});

Clicking a crumb both moves activeId and truncates the trail, so the markup needs no separate “is last” flag — current(id) answers it from state.