Skip to content

refactor: update breadcrumbs base styles, Lumo and Aura themes#11868

Merged
web-padawan merged 13 commits into
mainfrom
fix/breadcrumb-styles-and-themes
Jun 11, 2026
Merged

refactor: update breadcrumbs base styles, Lumo and Aura themes#11868
web-padawan merged 13 commits into
mainfrom
fix/breadcrumb-styles-and-themes

Conversation

@jouni

@jouni jouni commented May 28, 2026

Copy link
Copy Markdown
Member

This is how I would want the component styles to be. Not sure what we need to change in the specs to get closer to this.

Changes on a high level

  • Add padding around items, so that they gain a bigger click target, and that the focus outline is offset from the text.
  • Use baseline alignment, so that in case of the text in an item doesn't fit the width and wraps, the any prefix icon and other items in the breadcrumbs are still aligned on the top/first line.
    • Use the same white-space character for the icon pseudo elements, as in other similar cases, so that the icon element also sits on the baseline.
  • Use a mask-image for the overflow button ellipsis icon, instead of the font-dependent character.
  • Don't clip/hide overflow, to avoid padding + negative margin to keep focus outlines visible. Ensure items still collapse to the overflow menu by setting width, min-width and max-width on the host and the internal list.
  • Always use the pointer cursor for links, as that’s the expectation for links on the web.
  • Remove the link underline by default in base styles, as both Lumo and Aura want that removed.
  • Treat disabled items visually the same as items without a path (text-only items), to keep them legible.
  • Minor adjustments for iOS (prevent default tap highlight color).
  • Add a collection of --vaadin-breadcrumbs-* custom properties for easier customization.
  • Aura and Lumo opt to use the secondary text color for the links by default, and offer a variant (accent and primary, respectively) for coloring the links, which makes it possible to distinguish between link and non-link items without interacting with them.
  • Add a built-in slash variant to base styles, which changes the default separator icon from a chevron to a slash.

@jouni jouni force-pushed the fix/breadcrumb-styles-and-themes branch 6 times, most recently from dee184f to fc3e162 Compare May 29, 2026 12:23
@web-padawan web-padawan force-pushed the fix/breadcrumb-styles-and-themes branch 3 times, most recently from 95519ad to d447d72 Compare June 2, 2026 07:10

@web-padawan web-padawan left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pushed an update to the spec to list new custom CSS properties, also fixed JSDoc.
I'll continue reviewing the actual implementation later and update specs if needed.

@web-padawan web-padawan force-pushed the fix/breadcrumb-styles-and-themes branch 2 times, most recently from e7ab404 to 82e5099 Compare June 11, 2026 18:16
jouni and others added 10 commits June 11, 2026 21:25
Spec's CSS custom property tables align with the JSDoc on both elements:
nine container-level tokens (typography, color, gap, two mask-image
icons + size) and two item-level tokens (border radius, item gap). The
separator hook is `--vaadin-breadcrumbs-separator-icon` across spec
references; KDD #5, the overflow-separator bullet, and the item
separator-rendering bullet are updated accordingly. Added Discussion
entry explaining the token shape.
Remove --vaadin-breadcrumb-separator-icon-size
@web-padawan web-padawan force-pushed the fix/breadcrumb-styles-and-themes branch from 82e5099 to adc86d5 Compare June 11, 2026 18:25
@web-padawan web-padawan marked this pull request as ready for review June 11, 2026 19:45
@web-padawan web-padawan changed the title refactor: breadcrumbs base styles and themes refactor: update breadcrumbs base styles, Lumo and Aura themes Jun 11, 2026

@web-padawan web-padawan left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Let's merge this as is and make other changes in follow-up PRs if needed.

@sonarqubecloud

Copy link
Copy Markdown

@web-padawan web-padawan merged commit ddcdcc0 into main Jun 11, 2026
10 checks passed
@web-padawan web-padawan deleted the fix/breadcrumb-styles-and-themes branch June 11, 2026 20:01
@vaadin-bot

Copy link
Copy Markdown
Collaborator

This ticket/PR has been released with Vaadin 25.2.0-beta3.

github-merge-queue Bot pushed a commit to vaadin/flow-components that referenced this pull request Jun 18, 2026
The web component ships `primary` (Lumo) and `accent` (Aura) link-color
theme variants, but `BreadcrumbsVariant` only exposed `SLASH`. Added
missing `LUMO_PRIMARY` (`primary`) and `AURA_ACCENT` (`accent`)
variants.

Related to vaadin/web-components#11868

---

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants