feat: add breadcrumb component #10067
Conversation
Add a new breadcrumb navigation component with the following features: - Main `<vaadin-breadcrumb>` container component with semantic HTML - `<vaadin-breadcrumb-item>` sub-component for individual items - Support for href, target, and router-ignore attributes - Automatic detection and styling of the last/current item - Disabled state support - Full accessibility with ARIA attributes - Lumo theme integration with customizable CSS properties - TypeScript definitions - Demo page and test suite 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Artur-
force-pushed
the
web-components-breadcrumb
branch
from
79b254b to
562d4f2
Compare
Add comprehensive test coverage including: - Visual regression tests for base and Lumo themes - DOM snapshot tests for component structure - Tests for various states (hover, focus, disabled) - RTL support tests - Tests for different breadcrumb configurations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Artur-
force-pushed
the
web-components-breadcrumb
branch
from
562d4f2 to
c41a3a1
Compare
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
|
|
We will consider this component after the current styling changes are completed. Possible target: 25.1. |
| import '../packages/breadcrumb/vaadin-breadcrumb.js'; | ||
| import '../packages/breadcrumb/vaadin-breadcrumb-item.js'; |
There was a problem hiding this comment.
| import '../packages/breadcrumb/vaadin-breadcrumb.js'; | |
| import '../packages/breadcrumb/vaadin-breadcrumb-item.js'; | |
| import '@vaadin/breadcrumb/vaadin-breadcrumb.js'; | |
| import '@vaadin/breadcrumb/vaadin-breadcrumb-item.js'; |
| * | ||
| * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. | ||
| */ | ||
| declare class Breadcrumb extends ElementMixin(ThemableMixin(HTMLElement)) {} |
There was a problem hiding this comment.
Let's these move .d.ts files to src and align structure with existing components.
We can discuss moving HTMLElementTagNameMap to the root level in a separate issue.
| this.setAttribute('role', 'navigation'); | ||
| } | ||
|
|
||
| this.setAttribute('aria-label', 'Breadcrumb'); |
There was a problem hiding this comment.
This should either be left to the user or changed to use ariaLabel property with reflectToAttribute.
There is an example in vaadin-drawer-toggle web component which has default value.
Related to #7960
Add a new breadcrumb navigation component with the following features:
<vaadin-breadcrumb>container component with semantic HTML<vaadin-breadcrumb-item>sub-component for individual items🤖 Generated with Claude Code