Breadcrumb

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-breadcrumb> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-breadcrumb.js';   // registers <aha-breadcrumb> (+ <aha-icon>)
</script>

<!-- Each item: { label, href?, icon?, disabled? }. An href-less / last entry is the current page.
     separator="caret" (default) or "slash"; maxItems collapses the middle into an ellipsis toggle. -->
<aha-breadcrumb id="crumbs" separator="caret" maxItems="4"
  items='[{"label":"Home","href":"/","icon":"system-house"},{"label":"Presentations","href":"/p","icon":"system-folder"},{"label":"Team offsite","href":"/p/1"},{"label":"Q3 deck","href":"/p/1/d"},{"label":"Editor"}]'>
</aha-breadcrumb>

<!-- PAGE TITLE — this is how you render a page heading. size="page-title" makes the current crumb a
     real <h1> (heading-level picks h1–h6). Never hand-roll a plain <h1> for a page header — use this,
     so the type scale, the ancestor trail, aria-current and the navigate event all come for free. -->
<aha-breadcrumb size="page-title" items='[{"label":"Presentations"}]'></aha-breadcrumb>
<!-- …or with the ancestor path in front of the heading -->
<aha-breadcrumb size="page-title"
  items='[{"label":"Home","href":"/"},{"label":"Presentations","href":"/p"},{"label":"Team offsite"}]'>
</aha-breadcrumb>

<script>
  // The last item is the current page (not a link); links emit a composed `navigate` event.
  document.getElementById('crumbs').addEventListener('navigate', (e) => console.log('go to', e.detail.href));
</script>

import '@ahaslides-product/design/aha-breadcrumb';   // registers <aha-breadcrumb> (+ <aha-icon>)
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper for the composed `navigate` event; React 19 can bind onNavigate directly.
function AhaBreadcrumb({ items, onNavigate }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = (e) => onNavigate?.(e.detail);
    el.addEventListener('navigate', h);
    return () => el.removeEventListener('navigate', h);
  });
  return <aha-breadcrumb ref={ref} items={JSON.stringify(items)} separator="caret" maxItems={4} />;
}

// usage — each item: { label, href?, icon?, disabled? }; the last / href-less entry is the current page.
<AhaBreadcrumb
  items={[
    { label: 'Home', href: '/', icon: 'system-house' },
    { label: 'Presentations', href: '/p', icon: 'system-folder' },
    { label: 'Team offsite', href: '/p/1' },
    { label: 'Editor' },
  ]}
  onNavigate={({ href }) => router.push(href)}
/>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-breadcrumb';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<script setup>
import { computed } from 'vue';
// each item: { label, href?, icon?, disabled? }; the last / href-less entry is the current page.
const trail = [
  { label: 'Home', href: '/', icon: 'system-house' },
  { label: 'Presentations', href: '/p', icon: 'system-folder' },
  { label: 'Team offsite', href: '/p/1' },
  { label: 'Editor' },
];
const items = computed(() => JSON.stringify(trail));
function onNavigate(e) { router.push(e.detail.href); }
</script>

<template>
  <aha-breadcrumb :items="items" separator="caret" :maxItems="4" @navigate="onNavigate" />
</template>