Skip to content

feat(breadcrumbs): add component styles - #2365

Merged
rkaraivanov merged 1 commit into
rkaraivanov/breadcrumbsfrom
apetrov/breadcrumb-styles
Sep 2, 2026
Merged

rkaraivanov merged 1 commit into
rkaraivanov/breadcrumbsfrom
apetrov/breadcrumb-styles

Conversation

@adrianptrv

Copy link
Copy Markdown
Contributor

Description

Adding styles for the new Breadcrumbs component.

Needs to be tested together with this theming PR: 601

Handoff: https://www.figma.com/design/B6BpAtRGepZS0t3bCExofc/Breadcrumbs-Handoff

Type of Change

  • New feature (non-breaking change that adds functionality)

Checklist

  • My code follows the project's coding standards
  • I have tested my changes locally

@sbayreva

sbayreva commented Sep 2, 2026 •

Copy link
Copy Markdown

Material

  1. The color of the separator should be gray 700 in Light and Dark Mode
  2. There is something strange in this example with the icon color of the last item:
Screenshot 2026-09-02 at 12 21 04



Relevant for all Themes

  1. There should be gap between the label and the prefix/suffix (Relevant for all Themes)
  • S size 2px
  • M size 4px
  • L size 8px
  1. Please, check again the typography for all sizes and themes.

@rkaraivanov

Copy link
Copy Markdown
Member

@adrianptrv @sbayreva
I'll merge this PR directly into the main feature branch. Please push any changes there and log issues there as this separate PRs are more cumbersome to track and resolve.

@rkaraivanov
rkaraivanov merged commit 760f71d into rkaraivanov/breadcrumbs Sep 2, 2026
@rkaraivanov
rkaraivanov deleted the apetrov/breadcrumb-styles branch September 2, 2026 12:32
simeonoff added a commit that referenced this pull request Sep 17, 2026
* feat: Added Breadcrumbs component

* refactor: Minor cleanup of breadcrumb component

- Updated API documentation for the breadcrumb component.

* feat(breadcrumbs): add styles (#2365)

* fix(breadcrumbs): update paths

* feat(breadcrumbs): address comments

* fix(breadcrumbs): address padding comments

* fix(breadcrumb): prefix and suffix paddings

* fix(breadcrumbs): apply opacity to indigo icons

* deps(theming): bump to latest beta

* deps(theming): bump to version 29.0.0

* fix(breadcrumbs): a11y for disabled items and separators

- set aria-disabled via element internals and take slotted focusable
  elements out of the tab sequence while disabled, restoring their
  original tabindex when re-enabled
- hide the separator part from assistive technology so text separators
  are not announced
- drop the documented but unimplemented --ig-breadcrumbs-gap property
- add specs for aria-current, aria-disabled and tab-sequence handling
- rework stories around realistic scenarios: e-commerce, docs site,
  admin console, stateful file explorer with a collapsed trail, wrapping
  and sizes; wire the separator control

* feat(breadcrumbs): add 'force-colors: active' media styles

---------

Co-authored-by: Adrian Petrov <99720888+adrianptrv@users.noreply.github.com>
Co-authored-by: Adrian Petrov <adrian.ptrv1@gmail.com>
Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.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.

4 participants