vaadin · Artur- · Aug 25, 2025 · Aug 25, 2025 · Aug 26, 2025 · Sep 28, 2025
diff --git a/dev/breadcrumb.html b/dev/breadcrumb.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>vaadin-breadcrumb</title>
+  <script type="module" src="./common.js"></script>
+  <script type="module">
+    // Enable experimental breadcrumb component
+    window.Vaadin ??= {};
+    window.Vaadin.featureFlags ??= {};
+    window.Vaadin.featureFlags.breadcrumbComponent = true;
+
+    import '@vaadin/breadcrumb/vaadin-breadcrumb.js';
+    import '@vaadin/breadcrumb/vaadin-breadcrumb-item.js';
+  </script>
+  <style>
+    .demo-section {
+      margin: 2em 0;
+    }
+
+    .demo-section h3 {
+      margin-bottom: 1em;
+    }
+  </style>
+</head>
+
+<body>
+  <h2>Breadcrumb Examples</h2>
+
+  <div class="demo-section">
+    <h3>Basic Breadcrumb</h3>
+    <vaadin-breadcrumb>
+      <vaadin-breadcrumb-item href="/">Home</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="/products">Products</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="/products/laptops">Laptops</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item>MacBook Pro</vaadin-breadcrumb-item>
+    </vaadin-breadcrumb>
+  </div>
+
+  <div class="demo-section">
+    <h3>Short Breadcrumb</h3>
+    <vaadin-breadcrumb>
+      <vaadin-breadcrumb-item href="/">Home</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item>Settings</vaadin-breadcrumb-item>
+    </vaadin-breadcrumb>
+  </div>
+
+  <div class="demo-section">
+    <h3>Breadcrumb with Target</h3>
+    <vaadin-breadcrumb>
+      <vaadin-breadcrumb-item href="/">Home</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="https://vaadin.com" target="_blank">Vaadin (opens in new tab)</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item>Current Page</vaadin-breadcrumb-item>
+    </vaadin-breadcrumb>
+  </div>
+
+  <div class="demo-section">
+    <h3>Disabled Items</h3>
+    <vaadin-breadcrumb>
+      <vaadin-breadcrumb-item href="/">Home</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="/products" disabled>Products (disabled)</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item>Current Page</vaadin-breadcrumb-item>
+    </vaadin-breadcrumb>
+  </div>
+
+  <div class="demo-section">
+    <h3>Long Breadcrumb Trail</h3>
+    <vaadin-breadcrumb>
+      <vaadin-breadcrumb-item href="/">Home</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="/docs">Documentation</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="/docs/components">Components</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="/docs/components/navigation">Navigation</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="/docs/components/navigation/breadcrumb">Breadcrumb</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item>Examples</vaadin-breadcrumb-item>
+    </vaadin-breadcrumb>
+  </div>
+
+  <div class="demo-section">
+    <h3>Router Ignore Example</h3>
+    <vaadin-breadcrumb>
+      <vaadin-breadcrumb-item href="/">Home</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item href="/api" router-ignore>API (full page reload)</vaadin-breadcrumb-item>
+      <vaadin-breadcrumb-item>Current</vaadin-breadcrumb-item>
+    </vaadin-breadcrumb>
+  </div>
+</body>
+</html>
diff --git a/packages/breadcrumb/package.json b/packages/breadcrumb/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@vaadin/breadcrumb",
+  "version": "25.0.0-alpha20",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "vaadin-breadcrumb",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/breadcrumb"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
+  "main": "vaadin-breadcrumb.js",
+  "module": "vaadin-breadcrumb.js",
+  "type": "module",
+  "files": [
+    "src",
+    "vaadin-*.d.ts",
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "keywords": [
+    "Vaadin",
+    "breadcrumb",
+    "navigation",
+    "web-components",
+    "web-component"
+  ],
+  "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
+    "@vaadin/a11y-base": "25.0.0-alpha20",
+    "@vaadin/component-base": "25.0.0-alpha20",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha20",
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vaadin/chai-plugins": "25.0.0-alpha20",
+    "@vaadin/test-runner-commands": "25.0.0-alpha20",
+    "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha20",
+    "sinon": "^21.0.0"
+  },
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ]
+}
diff --git a/packages/breadcrumb/src/styles/vaadin-breadcrumb-item-styles.js b/packages/breadcrumb/src/styles/vaadin-breadcrumb-item-styles.js
@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import '@vaadin/vaadin-lumo-styles/icons.js';
+import { css } from 'lit';
+
+export const breadcrumbItemStyles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='link'] {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: var(--vaadin-breadcrumb-link-text-decoration, none);
+    color: var(--vaadin-breadcrumb-link-color, var(--vaadin-secondary-text-color));
+    transition: color 0.2s;
+    outline: none;
+    cursor: var(--vaadin-clickable-cursor);
+  }
+
+  a[part='link']:hover {
+    text-decoration: var(--vaadin-breadcrumb-link-hover-text-decoration, underline);
+    color: var(--vaadin-breadcrumb-link-hover-color, var(--vaadin-primary-text-color));
+  }
+
+  a[part='link']:focus-visible {
+    border-radius: var(--vaadin-radius-s);
+    box-shadow: 0 0 0 2px var(--vaadin-focus-ring-color);
+  }
+
+  span[part='link'] {
+    color: var(--vaadin-breadcrumb-current-color, var(--vaadin-primary-text-color));
+    cursor: default;
+  }
+
+  :host([disabled]) [part='link'] {
+    color: var(--vaadin-disabled-text-color);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  :host([last]) [part='link'] {
+    color: var(--vaadin-breadcrumb-current-color, var(--vaadin-primary-text-color));
+    font-weight: var(--vaadin-breadcrumb-current-font-weight, 500);
+  }
+
+  [part='separator'] {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 var(--vaadin-breadcrumb-separator-spacing, var(--vaadin-space-xs));
+    color: var(--vaadin-breadcrumb-separator-color, var(--vaadin-tertiary-text-color));
+  }
+
+  [part='separator']::after {
+    content: var(--vaadin-breadcrumb-separator, var(--lumo-icons-angle-right));
+    font-family: var(--vaadin-breadcrumb-separator-font-family, 'lumo-icons');
+    font-size: var(--vaadin-breadcrumb-separator-size, var(--vaadin-icon-size-s));
+  }
+`;
diff --git a/packages/breadcrumb/src/styles/vaadin-breadcrumb-styles.js b/packages/breadcrumb/src/styles/vaadin-breadcrumb-styles.js
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import '@vaadin/vaadin-lumo-styles/icons.js';
+import { css } from 'lit';
+
+export const breadcrumbStyles = css`
+  :host {
+    display: block;
+    font-size: var(--vaadin-breadcrumb-font-size, var(--vaadin-font-size-s));
+    line-height: var(--vaadin-breadcrumb-line-height, var(--vaadin-line-height-xs));
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='list'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+`;
diff --git a/packages/breadcrumb/src/vaadin-breadcrumb-item.d.ts b/packages/breadcrumb/src/vaadin-breadcrumb-item.d.ts
@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * `<vaadin-breadcrumb-item>` is a Web Component for displaying a single item in a breadcrumb trail.
+ *
+ * ⚠️ **This component is experimental** and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.breadcrumbComponent = true`.
+ *
+ * ```html
+ * <vaadin-breadcrumb-item href="/products">Products</vaadin-breadcrumb-item>
+ * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name    | Description
+ * -------------|----------------
+ * `link`       | The link element
+ * `separator`  | The separator element
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute   | Description
+ * ------------|-------------
+ * `disabled`  | Set when the element is disabled
+ * `last`      | Set when this is the last item in the breadcrumb
+ * `current`   | Set when the item's href matches the current page
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ */
+declare class BreadcrumbItem extends DisabledMixin(DirMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
+  /**
+   * The URL to navigate to
+   */
+  href: string | null | undefined;
+
+  /**
+   * The target of the link
+   */
+  target: string | null | undefined;
+
+  /**
+   * Whether to exclude the item from client-side routing
+   */
+  routerIgnore: boolean;
+
+  /**
+   * Whether the item's href matches the current page
+   */
+  readonly current: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-breadcrumb-item': BreadcrumbItem;
+  }
+}
+
+export { BreadcrumbItem };