Varendo

Breadcrumb

Reversible context path; approved routes and current-location semantics.

FamilynavigationLicenseApache-2.0
StandaloneAvailable

Use the web element directly without the semantic runtime.

Semantic bindingAvailable

A registered presentation adapter can bind this component to host-owned meaning and state.

Automatic adaptationNo standard recipe

The standard recipe resolver does not select this component automatically.

Import and live example

A three-level report path ending at the current weekly report.

Interactive preview requires JavaScript.

View the complete example source
import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoBreadcrumbElement,
  AeliqoMenuElement,
  AeliqoPaginationElement,
  AeliqoTabsElement,
  AeliqoTreeNavElement,
  type AeliqoBreadcrumbItem,
  type AeliqoMenuItem,
  type AeliqoTabItem,
  type AeliqoTreeNavNode,
} from "@varendo/web/navigation";

const tabs: readonly AeliqoTabItem[] = [
  {id: "overview", label: "Overview", content: "Overview content"},
  {id: "details", label: "Details", content: "Details content"},
  {id: "history", label: "History", content: "History content", disabled: true},
];
const breadcrumb: readonly AeliqoBreadcrumbItem[] = [
  {id: "home", label: "Home", href: "/"},
  {id: "reports", label: "Reports", href: "/reports"},
  {id: "current", label: "Weekly report", current: true},
];
const menuItems: readonly AeliqoMenuItem[] = [
  {id: "open", label: "Open report"},
  {id: "archive", label: "Archive"},
  {id: "disabled", label: "Unavailable", disabled: true},
];
const treeNodes: readonly AeliqoTreeNavNode[] = [
  {id: "reports", label: "Reports", children: [{id: "weekly", label: "Weekly"}, {id: "monthly", label: "Monthly"}]},
  {id: "settings", label: "Settings", disabled: true},
];

registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoBreadcrumbElement>("aeliqo-breadcrumb", root);
		element.items = breadcrumb;
		element.label = "Report path";
	}))(root);

Purpose

Shows a path as an ordered list. Approved ancestor destinations are links; the current item is text. Mark it with current; if none is marked, the final item is current.

When to use it

When to use a different component

Properties and defaults

Only approved hrefs are supplied and the current item is exposed as the page endpoint.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
itemsSupplies the ordered bounded items with stable IDs and display labels.readonly AeliqoBreadcrumbItem[][]
labelProvides the visible label and accessible name for the component.string'Breadcrumb'

Events

Events, payloads, timing, and application responsibilities
EventPayloadEmittedApplication responsibility
aeliqo-navigationThe approved destination and navigation context.After a navigation item is activated.Route through the application and preserve browser history semantics.

Events cross the component boundary as user proposals. Validate their detail and current authority before applying a business effect.

Listen for aeliqo-navigation

TypeScript example
const element = document.querySelector('aeliqo-breadcrumb');<p>element?.addEventListener('aeliqo-navigation', (event) => {
  const proposal = (event as CustomEvent<unknown>).detail;
  // Validate the proposal, update host state, then assign controlled properties.
  applyProposal(proposal);
});

States and failure handling

Relevant states:

Expected result: The path is navigable while the current location remains semantically marked.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Allow long path segments to wrap. Keep the current location clear when the host shortens ancestry for a small screen.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoBreadcrumbElement extends AeliqoFoundationElement {
    static readonly properties: {
        items: {
            attribute: boolean;
        };
        label: {
            type: StringConstructor;
        };
    };
    static readonly styles: import("lit").CSSResult[];
    items: readonly AeliqoBreadcrumbItem[];
    label: string;
    private navigate;
    protected render(): import("lit").TemplateResult<1>;
}

Version

This page documents the Varendo 0.6 component contract.