Are you an LLM? You can read better optimized documentation at /api/css/breadcrumb.link.md for this page in Markdown format
CSS: breadcrumb.link
li · stable — A crumb (InstUI Breadcrumb.Link), an <li> in the parent's <ol>; the last one is the current page.
The parent breadcrumb's -size-sm/-size-lg modifiers adjust this member's separator spacing — see breadcrumb's own doc for those modifiers.
Accessibility
Mark the current page's crumb with aria-current="page" — on its <a> if it's a link, otherwise on the <li> itself.
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/breadcrumb.link.css";Modifiers
| Modifier | Description |
|---|---|
.-size-large | Long-form alias of -size-lg. |
.-size-medium | Long-form alias of -size-md. |
.-size-small | Long-form alias of -size-sm. |
Pseudo-elements
| Pseudo-element | Description |
|---|---|
::after | Renders the chevron separator after every crumb except the last; mirrors to chevron-left in [dir="rtl"]. |
::before | In a collapsed parent draws a masked back-arrow before this crumb's second-to-last link. |
Conditions
| Type | Query | Description |
|---|---|---|
| media | (max-width: 47.9375em) | — |
| media | (--breakpoint-large-down) | Collapses the trail, showing only the previous crumb and a back arrow. |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-color-text-muted | <color> | LightDarklight-dark(#576773, #AAB0B5) |
--instui-component-breadcrumb-gap-lg | <length> | 0.5rem |
--instui-component-breadcrumb-gap-md | <length> | 0.25rem |
--instui-component-breadcrumb-gap-sm | <length> | 0.125rem |
--instui-component-link-text-color | <color> | LightDarklight-dark(#2369A4, #7FB4F1) |
--instui-component-link-text-hover-color | <color> | LightDarklight-dark(#1A5281, #ACCDF7) |
--instui-icon-chevron-left | <image> | url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E') |
--instui-icon-chevron-right | <image> | url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E') |
--instui-spacing-space2xs | <length> | 0.125rem |