feat: add breadcrumb component #10067
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Artur-
force-pushed
the
web-components-breadcrumb
branch
2 times, most recently
from
562d4f2 to
c41a3a1
Compare
|
|
We will consider this component after the current styling changes are completed. Possible target: 25.1. |
web-padawan
reviewed
Aug 27, 2025
| * | ||
| * 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.
web-padawan
reviewed
Aug 27, 2025
| 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.
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]>
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]>
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Co-authored-by: Serhii Kulykov <[email protected]>
Align breadcrumb component structure with existing components by moving TypeScript definition files to src/ directory and updating root files to re-export from src. This follows the established pattern used by button, accordion, and other components. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Add experimental feature flag to breadcrumb components following the established pattern used by other experimental Vaadin components. Components are now hidden behind the breadcrumbComponent feature flag and must be explicitly enabled. - Add static experimental() getter to both breadcrumb classes - Update JSDoc and TypeScript documentation with experimental warning - Update dev example and tests to enable feature flag - Follow same pattern as vaadin-master-detail-layout Users must enable with: window.Vaadin.featureFlags.breadcrumbComponent = true 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Use ??= instead of ||= for initializing Vaadin.featureFlags objects. This is more semantically correct as it only assigns when the value is nullish (null/undefined) rather than any falsy value, preventing accidental overwrites of existing objects. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Update imports from '@vaadin/vaadin-lumo-styles/font-icons.js' to '@vaadin/vaadin-lumo-styles/icons.js' to fix module resolution errors. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Update breadcrumb-item to use the same 'breadcrumbComponent' feature flag as the breadcrumb container, simplifying the API for users. Both components now share window.Vaadin.featureFlags.breadcrumbComponent = true 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Artur-
force-pushed
the
web-components-breadcrumb
branch
from
4487451 to
6604731
Compare
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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