होम कंपोनेंटब्रेडक्रंब

ब्रेडक्रंब

पेजों की हायरार्की में कोई पेज कहाँ है, और उसमें वापस ऊपर जाने का रास्ता। ऊपर के स्तर लिंक हैं, सबसे ऊपर से क्रम में, और ख़ुद पेज सबसे अंत में है।

अंतिम अपडेट: 23 अक्टूबर 2026

content_copy

Markdown में देखें

श्रेणी: नेविगेशन
टोकन: comp.breadcrumbs
स्तर: आधार

अवलोकन

Web: tanrei-breadcrumbs; schedule
SwiftUI: TanreiBreadcrumbs; radio_button_unchecked
Jetpack Compose: TanreiBreadcrumbs; radio_button_unchecked
Flutter: TanreiBreadcrumbs; radio_button_unchecked
React Native: Breadcrumbs; radio_button_unchecked

इससे जनरेट किया गया: docs/status/status.json, specs/breadcrumbs.spec.json

तीन स्तरों का ट्रेल

होम कंपोनेंटब्रेडक्रंब

ट्रेल यह दिखाता है कि पेज हायरार्की में कहाँ है, यह नहीं कि व्यक्ति उस तक किस रास्ते से आया। इसे वहाँ इस्तेमाल करें जहाँ पेज दूसरे पेजों के भीतर रहते हैं, तीन या ज़्यादा स्तर गहरे।

इस्तेमाल

वेब पर ब्रेडक्रंब आपके अपने ऐंकर के चारों ओर एक एलिमेंट हैं। ऐंकर दस्तावेज़ में ही रहते हैं, इसलिए वे किसी स्क्रिप्ट के चलने से पहले ही लिंक हैं, और क्रॉलर, पेज के ऐंकर पर काम करने वाला राउटर और राउटर का अपना लिंक कंपोनेंट, सब उन्हें पा लेते हैं।

जिस स्तर का कोई गंतव्य है, वह एक <a href> है। जिसका कोई गंतव्य नहीं है, वह एक <span> है: मौजूदा पेज, या वह स्तर जिसका अपना कोई पेज नहीं है।

SwiftUI, Compose, Flutter और React Native नियोजित हैं: इस पेज के शुरू में हर प्लैटफ़ॉर्म के साथ दिए गए नाम वे हैं जो स्पेक उन्हें देता है, और वहाँ अभी कुछ उपलब्ध नहीं है।

<link rel="stylesheet" href="@tanrei/web/tokens.css" />
<link rel="stylesheet" href="@tanrei/web/icons.css" />
<link rel="stylesheet" href="@tanrei/web/breadcrumbs.css" />

<tanrei-breadcrumbs label="ब्रेडक्रंब" overflow-label="छिपे हुए स्तर दिखाएँ">
  <a href="/">होम</a>
  <a href="/components/">कंपोनेंट</a>
  <span aria-current="page">बटन</span>
</tanrei-breadcrumbs>

<!-- पहले लेबल से पहले एक ग्लिफ़, या अकेला ग्लिफ़। टेक्स्ट तब भी स्तर का नाम है। -->
<tanrei-breadcrumbs label="ब्रेडक्रंब" overflow-label="छिपे हुए स्तर दिखाएँ">
  <a href="/" data-icon="home" data-icon-only>होम</a>
  <a href="/components/">कंपोनेंट</a>
  <span aria-current="page">बटन</span>
</tanrei-breadcrumbs>

<script type="module">
  import '@tanrei/web';
</script>

import { Breadcrumbs } from '@tanrei/react';
import '@tanrei/web/breadcrumbs.css';
import { Link as RouterLink } from 'react-router-dom';

<Breadcrumbs label="ब्रेडक्रंब" overflowLabel="छिपे हुए स्तर दिखाएँ">
  {/* राउटर का लिंक अपना ऐंकर ख़ुद रेंडर करता है, और अपने click से नेविगेशन अपने हाथ में लेता है। */}
  <RouterLink to="/">होम</RouterLink>
  <RouterLink to="/components/">कंपोनेंट</RouterLink>
  <span aria-current="page">बटन</span>
</Breadcrumbs>

प्रॉपर्टी	वेब पर
`label`	`label` ऐट्रिब्यूट: नेविगेशन लैंडमार्क का नाम
`overflow`	`overflow="collapse"` (डिफ़ॉल्ट) या `overflow="wrap"`
`overflowLabel`	`overflow-label`: ओवरफ़्लो बटन का नाम
`underline`	`underline="always"`, `"hover"` या `"never"`। इसके बिना ट्रेल डिज़ाइन सिस्टम के अनुसार चलता है
स्तर	एक `<a href>` चाइल्ड, या बिना गंतव्य वाले स्तर के लिए एक `<span>` चाइल्ड
स्तर का `label`	उसका टेक्स्ट
`current`	आख़िरी चाइल्ड पर `aria-current="page"`
`icon`	`data-icon="home"`
`iconOnly`	`data-icon-only`
`click`	ऐंकर का अपना `click`

स्पेक

बिना पेज का स्तर; लिंक के रूप में मौजूदा पेज; पैरेंट पर ख़त्म होने वाला ट्रेल

होमबुनियादी बातेंटाइपोग्राफ़ी

होम कंपोनेंट बटन

होम कंपोनेंट

होवर, फ़ोकस या दबाए जाने के दौरान की अंडरलाइन; और कभी नहीं

होम कंपोनेंटब्रेडक्रंब

सँकरे कॉलम में लंबा ट्रेल: सिमटा हुआ, और रैप हुआ

होम दस्तावेज़बुनियादी बातें डिज़ाइन टोकन कंपोनेंट टोकनअक्षम कंटेनर कैसे व्युत्पन्न होता है

जो स्तर कहीं ले जाता है, वह अंडरलाइन के साथ रहता है, डिफ़ॉल्ट सिस्टम में। वहाँ रंग नहीं, अंडरलाइन बताती है कि कोई स्तर लिंक है, जैसे वह वाक्य के भीतर के लिंक के लिए बताती है। बिना गंतव्य वाला स्तर सेकंडरी टेक्स्ट है। मौजूदा पेज ज़्यादा भारी वेट में, टेक्स्ट के रंग में होता है, और उस पर अंडरलाइन कभी नहीं होती।
अंडरलाइन कब बने, यह एक चुनाव है। underline="hover" उसे सिर्फ़ तब बनाता है जब स्तर होवर किया हुआ हो, कीबोर्ड से फ़ोकस किया हुआ हो या दबाया हुआ हो। underline="never" कोई अंडरलाइन नहीं बनाता। ऐट्रिब्यूट के बिना ट्रेल comp.breadcrumbs.underline.visibility के अनुसार चलता है, जो हर टेक्स्ट लिंक के लिए डिज़ाइन सिस्टम के चुनाव के अनुसार चलता है। hover या never सिर्फ़ वहाँ चुनें जहाँ लिंक का रंग टेक्स्ट के रंग से अलग दिखता है। फ़ोर्स्ड कलर्स में रेखा हमेशा बनती है।
मौजूदा पेज टेक्स्ट है। जिस पेज पर व्यक्ति है, उसका लिंक कहीं नहीं ले जाता और हर पेज में एक Tab स्टॉप जोड़ता है। उसे href सिर्फ़ वहाँ दें जहाँ पेज के व्यू एक ही पते के नीचे बदलते हैं। तब वह उसी रूप वाला एक लिंक है। जहाँ पेज की हेडिंग ट्रेल के ठीक नीचे है, वहाँ आप मौजूदा पेज को छोड़ सकते हैं।
सेपरेटर कंपोनेंट के हैं: दो पड़ोसी स्तरों के बीच chevron_right। लेबल में सेपरेटर कभी न लिखें।
लंबा ट्रेल बीच से सिमटता है। collapse में ट्रेल एक ही पंक्ति में रहता है। स्तर ओवरफ़्लो बटन के पीछे जाते हैं, पहले के बग़ल वाले से शुरू करके, सिर्फ़ उतने जितने चौड़ाई माँगती है, और फिर पहला। आख़िरी स्तर कभी नहीं हटाया जाता। उसका लेबल सिर्फ़ तब काटा जाता है जब बटन और अकेला वह भी न समाएँ।
ओवरफ़्लो बटन एक मेन्यू खोलता है, जिसमें हटाए गए स्तर ट्रेल के क्रम में रहते हैं। गंतव्य वाला स्तर वहाँ भी एक लिंक है। मेन्यू की पंक्ति पर अंडरलाइन कभी नहीं होती।
wrap हर स्तर रखता है और ट्रेल को कई पंक्तियों में चलने देता है। कोई पंक्ति कभी सेपरेटर से शुरू नहीं होती, और कोई लेबल नहीं काटा जाता।
वह अपनी चौड़ाई के अनुसार सिमटता है, विंडो की चौड़ाई के अनुसार नहीं, और जब उसकी चौड़ाई, कोई लेबल या टेक्स्ट का साइज़ बदलता है तो फिर से तय करता है।
दाएँ से बाएँ में ट्रेल दाईं ओर से चलता है और सेपरेटर बाईं ओर इशारा करते हैं। बाएँ से दाएँ वाला नाम अपना क्रम बनाए रखता है।

संरचना

भाग	विवरण
1 `root`	The navigation landmark and, in it, one ordered list of the levels, from the top of the hierarchy to the page. On one line by default.
2 `container`	The shape behind a level that is a link, and behind the overflow button. It has no fill at rest and takes no room in the layout: it is where hover, focus and press are drawn.
3 `label`	A level's text, in the trail's text style.
4 `underline`	The line under the label of a level that is a link, in the label's color. When it is drawn is a choice (BRC-30): at rest in the default system, where it is what says that a level leads somewhere. The current page and a level without a destination have none.
5 `icon` · वैकल्पिक	A glyph of the system's icon set that the product names for a level (a house for the top), before the label or in its place. Decorative.
6 `separator`	The glyph chevron_right between two neighbouring levels, drawn by the trail. Decorative; mirrored in a right-to-left layout by the icon helper.
7 `overflow-button` · वैकल्पिक	An icon-only button showing more_horiz that stands where levels were taken out of a trail too long for its width, and opens a menu of them.
8 `menu` · वैकल्पिक	The menu of the levels that were taken out, in the trail's order: a Tanrei menu, opened from the overflow button.
9 `focus-ring`	The indicator shown for keyboard focus, around a link's or the overflow button's container.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`label`	`string`	`""`	The accessible name of the landmark ("Breadcrumbs"), in the product's language. Tanrei ships no words of its own. It tells this landmark from the page's other navigation, so it is required.
`overflow`	`collapse` \| `wrap`	`"collapse"`	What a trail longer than its width does. collapse: it stays on one line and its middle levels go behind the overflow button, as many as the width asks for (BRC-9). wrap: every level stays in the trail, which runs over as many lines as it needs (BRC-15).
`overflowLabel`	`string`	`""`	The accessible name of the overflow button ("Show hidden levels"), in the product's language. Required while overflow is collapse; ignored while it is wrap.
`underline`	`auto` \| `always` \| `hover` \| `never`	`"auto"`	When the levels that are links are underlined. always: at rest and in every state. hover: while a level is hovered, focused from the keyboard or pressed, and not at rest. never: in no state. Auto takes comp.breadcrumbs.underline.visibility, the design system's answer (always in the default system). It applies to every level of the trail.

आइटम

वे आइटम के प्रकार जिन्हें कंपोनेंट दोहराता है। फ़िक्स्चर अपने आइटम क्रम से सूचीबद्ध करता है; हर प्लैटफ़ॉर्म हर प्रकार को अपने तरीक़े से नाम देता है।

`item`

One level of the hierarchy: a link to it, the page the person is on, or the name of a level that has no page.

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`label`	`string`	`""`	The level's name: the title of its page, as short as the product has it. It is the item's accessible name, drawn or not.
`href`	`string`	`""`	The destination: an address as the platform's links take one. With one the level is a link; without one it is text — the current page, or a level that has no page of its own (BRC-3).
`current`	`boolean`	`false`	The level is the page the person is on. Only the last item may be current. It is exposed as the current page and drawn heavier, without an underline; give it no href, so that it is text and not a link to where the person already is (BRC-4).
`icon`	`string`	`""`	The name of a glyph of the system's icon set, drawn before the label ("home" for the top of the hierarchy). Empty: no glyph.
`iconOnly`	`boolean`	`false`	Draws the glyph alone and keeps the label as the accessible name. Ignored while icon is empty.

इवेंट	विवरण
`click`	A level that is a link was activated by pointer, touch, Enter or assistive technology, in the trail or in the menu. It is emitted before the destination opens; a product that takes the navigation itself (a client-side router) cancels it (BRC-22).

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
आइटम	`a`	`TanreiBreadcrumbsItem`	`TanreiBreadcrumbsItem`	`TanreiBreadcrumbsItem`	`BreadcrumbsItem`
`label` · प्रॉपर्टी	`textContent`	`label`	`label`	`label`	`label`
`href` · प्रॉपर्टी	`href`	`destination`	`href`	`href`	`href`
`current` · प्रॉपर्टी	`aria-current`	`isCurrent`	`current`	`isCurrent`	`current`
`icon` · प्रॉपर्टी	`data-icon`	`icon`	`icon`	`icon`	`icon`
`iconOnly` · प्रॉपर्टी	`data-icon-only`	`iconOnly`	`iconOnly`	`iconOnly`	`iconOnly`
`click` · इवेंट	`click`	`action`	`onClick`	`onPressed`	`onPress`
टिप्पणियाँ	The product's own child of the element, in the document: an `<a href>` for a level with a destination, a `<span>` for one without. The label is its text; `aria-current="page"` marks the current page; `data-icon="home"` names a glyph and `data-icon-only` hides the text from sight, not from the name.	A value: `TanreiBreadcrumbsItem("Components", destination: url, action:)`; `destination` is an optional `URL`. `action` runs before the address opens and returns whether the link should still open it.	A data class; `href` is nullable. `onClick` returns false to keep the address closed; otherwise `LocalUriHandler.current` opens it.	A value class; `href` is nullable. `onPressed` returns false to keep the address closed; otherwise the opener the app provides opens it.	An object of the `items` prop. `onPress` receives an event whose `preventDefault()` keeps the address closed; otherwise `Linking.openURL(href)`.

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
`BRC-1`	THE breadcrumbs SHALL be one navigation landmark named by label that holds one ordered list of its items, in the order the product gave them — from the top of the hierarchy to the page — each a list item with its position in the list, and nothing else that assistive technology reads but the overflow button; WHILE label is empty THE breadcrumbs SHALL still render, and in debug builds report that the landmark has no accessible name. WHILE it has no item THE breadcrumbs SHALL draw nothing, take no room and expose no landmark.
`BRC-2`	WHILE an item's href is a destination and its current is false THE breadcrumbs SHALL draw that level as the platform's own link to it (the web's anchor element in the document itself, not in a shadow root; SwiftUI's Link; on Compose, Flutter and React Native an element with the platform's link semantics whose address is opened by the platform's opener), so that whatever the platform gives a link — on the web its context menu, opening in a new tab or window, copying and dragging its address, the address shown before it is followed, a crawler that reads it, and a link that works before any script has run — is the platform's, and not the trail's to draw or to take over; it SHALL expose the link role, named by the item's label, and SHALL draw the label in comp.breadcrumbs.label.typescale and comp.breadcrumbs.item.content.color and, WHILE its underline is shown (BRC-30), with an underline comp.breadcrumbs.underline.width thick, comp.breadcrumbs.underline.offset below the text's baseline, in the label's color of its state, under the text only and not under a glyph. In the default system the underline is shown at rest and in every state: there, in a trail as in a sentence, the underline and not the color says that a level leads somewhere.
`BRC-3`	WHILE an item has no destination and its current is false THE breadcrumbs SHALL draw that level as text — its label in comp.breadcrumbs.label.typescale and comp.breadcrumbs.label.color, with no underline and no container — which is not focusable, answers no hover, focus or press, has no role of its own and emits nothing: it names a level of the hierarchy that has no page. IF an item's href names a script to run rather than a place to go (the web's javascript: scheme) or cannot be read as an address by the platform THE breadcrumbs SHALL draw that level so too, and in debug builds report it.
`BRC-4`	WHILE the last item's current is true THE breadcrumbs SHALL expose that level as the current page (on the web aria-current with the value page; on a platform without that state, the selected state) and SHALL draw its label in comp.breadcrumbs.current.content.color, with no underline, at the emphasized weight of its text style — that style's weight plus sys.typescale.emphasis.body — so that it is told from the levels above it by more than its color. WHILE that item has no destination it SHALL be text as BRC-3 says: not focusable, without states and without an event. WHILE it has a destination it SHALL be a link as BRC-2 says that keeps this look and answers hover, focus and press with the tokens of the current part. IF current is true on an item that is not the last THE breadcrumbs SHALL draw that item as if current were false, and in debug builds report it.
`BRC-5`	THE breadcrumbs SHALL open a destination in the context the person is in and in no other, SHALL draw no mark for a new context and SHALL draw no state for a destination already visited: the levels of one hierarchy replace the page the person is on, and a level's colors say what it is and what state it is in.
`BRC-6`	THE breadcrumbs SHALL draw one separator between every two neighbouring entries of the trail — levels and the overflow button alike — and none before the first or after the last: the glyph chevron_right of the system's icon set in a box comp.breadcrumbs.separator.size large, in comp.breadcrumbs.separator.color, comp.breadcrumbs.separator.gap from the entry on either side, centred on the line of the label beside it, drawn through the platform's icon helper with sys.icon.family.unselected and sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max. A separator SHALL be hidden from assistive technology, SHALL be no part of a level's name, link or hit area, and SHALL keep its color in every state of the levels beside it.
`BRC-7`	WHILE an item's icon names a glyph THE breadcrumbs SHALL draw it before the label in the reading direction, in a box comp.breadcrumbs.icon.size large, comp.breadcrumbs.container.gap from the label, centred on the label's line, in the color of the level's label and state, through the icon helper as BRC-6 draws a separator, hidden from assistive technology. WHILE iconOnly is also true THE breadcrumbs SHALL draw the glyph alone, with no label and no underline, its container a square one line of the trail's text high around it, and SHALL keep the item's label as its accessible name. WHILE an item's label is empty THE breadcrumbs SHALL still render it, and in debug builds report that the level has no name.
`BRC-8`	WHILE overflow is collapse THE breadcrumbs SHALL set the trail on one line, each label on one line, as wide as its entries need and no wider than the layout gives it, aligned to the start, and SHALL NOT wrap or scroll it.
`BRC-9`	WHILE overflow is collapse and the trail is wider than the width the layout gives it THE breadcrumbs SHALL take levels out of the trail and draw the overflow button once, in the place of the first level it took out: first the levels between the first and the last, beginning with the one next to the first and going on toward the last, each only if what is left still does not fit; then, if the first level, the button and the last level still do not fit, the first level as well, so that the button begins the trail. It SHALL NOT take out the last level, SHALL take out no more levels than the width asks for, and SHALL measure the trail with its separators and gaps, by the width it is given and not by the window's.
`BRC-10`	THE breadcrumbs SHALL draw the overflow button as the glyph more_horiz of the system's icon set in a box comp.breadcrumbs.icon.size large, in comp.breadcrumbs.overflow.content.color, drawn as BRC-6 draws a separator, in a container that is a square one line of the trail's text high with corners comp.breadcrumbs.container.shape; it SHALL be one list item of the trail holding one focusable element with the button role, named by overflowLabel, that says it opens a menu and whether that menu is open, and WHILE overflowLabel is empty SHALL still render and in debug builds report that the button has no accessible name. WHILE no level is taken out THE breadcrumbs SHALL draw no overflow button.
`BRC-11`	WHEN the user activates the overflow button by pointer, touch, Enter or Space THE breadcrumbs SHALL open a menu anchored to it, below it with the start edges aligned, that lists the levels taken out in the trail's order, each named by its label and showing its glyph where it has one: a level with a destination as an item that is a link to it, a level without one as a disabled item. What the menu draws, how focus enters it and moves in it, and how it closes are the menu's own (its spec's behaviours), and WHEN it closes without a level having been followed THE breadcrumbs SHALL return focus to the overflow button.
`BRC-12`	WHEN the width the layout gives the trail, a label, the text size or the layout direction changes THE breadcrumbs SHALL decide again which levels are taken out, at once and without a motion of its own; a level that fits again SHALL return to its place in the trail. WHEN a level that holds keyboard focus is taken out THE breadcrumbs SHALL move focus to the overflow button, and WHEN the overflow button is removed while it holds focus or its menu is open THE breadcrumbs SHALL close the menu and move focus to the first level that returned.
`BRC-13`	WHILE a level is taken out of the trail THE breadcrumbs SHALL keep it out of the list assistive technology reads and out of the focus order, reached through the menu alone; WHERE the platform's links are elements of a document (the web) THE breadcrumbs SHALL keep that level's link in the document, hidden, so that the whole trail is there for whatever reads the page as built and before any script has run.
`BRC-14`	WHILE overflow is collapse and the overflow button with the last level alone is still wider than the width the layout gives, or the trail has one level that is, THE breadcrumbs SHALL cut that level's label with an ellipsis at the end of its own direction (BRC-28), keeping the button, the separator and a glyph whole; the full label SHALL remain what assistive technology reads.
`BRC-15`	WHILE overflow is wrap THE breadcrumbs SHALL keep every level in the trail and draw no overflow button: it SHALL break the trail onto as many lines as it needs, comp.breadcrumbs.row-gap apart and aligned to the start, only after a separator, so that a separator ends a line and never begins one; a label longer than a line SHALL wrap where its language allows a break and, for a run with no such place, inside the run, and SHALL NOT be cut.
`BRC-16`	WHILE a level that is a link or the overflow button is hovered, keyboard-focused or pressed THE breadcrumbs SHALL render its container, its content — the label with its underline and glyph, or the button's glyph — and its opacity from the component tokens of its part (item, current, overflow) in the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state. The container SHALL be the box of the content, with corners comp.breadcrumbs.container.shape, and SHALL take no room and move nothing beside it.
`BRC-17`	WHEN a level that is a link or the overflow button receives keyboard focus THE breadcrumbs SHALL show the focus ring around its container without animation — the system's focus indicator, sys.focus.offset from the container, sys.focus.outer-width wide in the focus-ring color, with the inner stroke of sys.focus.inner-width where the system has one — and, for a label that runs over several lines of a wrapped trail, around its part of each line; focus gained by pointer or touch SHALL NOT show it.
`BRC-18`	WHEN a level that is a link is pressed by pointer, touch or Enter, or the overflow button by pointer, touch, Enter or Space, THE breadcrumbs SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
`BRC-19`	WHILE pressed THE breadcrumbs SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; content, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.breadcrumbs.motion.feedback-duration with motion.state-easing, fades over motion.state-duration with motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
`BRC-20`	THE breadcrumbs SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
`BRC-21`	THE breadcrumbs SHALL change a level or the overflow button between its states over comp.breadcrumbs.motion.state-duration with comp.breadcrumbs.motion.state-easing, and at once where motion is reduced.
`BRC-22`	WHEN the user activates a level that is a link in the trail by pointer, touch or Enter THE breadcrumbs SHALL emit that item's click exactly once and then open its href, unless the product cancelled that click, in which case it SHALL open nothing: the product's own router has taken the navigation. It SHALL NOT hold the navigation back for sys.motion.duration.press-hold. THE breadcrumbs SHALL NOT activate a link in the trail on Space, which on the web scrolls the page as it does on any link, and SHALL NOT show the pressed state for it; a level listed in the menu is the menu's link item, whose keys and activation are the menu's own (MNU-53, MNU-54: its click is emitted once and can be cancelled, the menu closes, then the destination opens, and Space activates it as it does every row of a menu); WHERE the platform gives its links other keys or gestures (on the web a modified or a middle click that opens a new tab, on Apple platforms a long press that previews) THE breadcrumbs SHALL leave them to the platform.
`BRC-23`	WHERE the visual size of a level that is a link or of the overflow button is below the minimum target THE breadcrumbs SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size or the room it takes, and on the axis of the trail no further than halfway to the entry beside it, so that no two hit areas overlap; a platform that cannot tell the input type SHALL use sys.target.touch.
`BRC-24`	WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE breadcrumbs SHALL draw a level that is a link, with its underline and glyph, in the platform's link color, the current page, a level without a destination and the separators in its text color, the overflow button's glyph in its button text color, and the focus ring in its highlight color, and SHALL draw the underline of a level that is a link at rest, whatever underline and the tokens it follows say: the colors are then the person's, and nothing holds a link's color apart from a text level's.
`BRC-25`	WHILE the text size is enlarged THE breadcrumbs SHALL grow with its text — its labels, its containers and its hit areas — keeping comp.breadcrumbs.separator.gap, comp.breadcrumbs.container.gap, comp.breadcrumbs.underline.width, comp.breadcrumbs.underline.offset, comp.breadcrumbs.row-gap and its glyphs at comp.breadcrumbs.icon.size and comp.breadcrumbs.separator.size, and SHALL decide again what fits (BRC-12).
`BRC-26`	THE breadcrumbs SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the breadcrumbs is shown THE breadcrumbs SHALL draw itself for the new direction at once, without a motion of its own, keeping its focus and whether its menu is open.
`BRC-27`	WHERE the layout direction is right-to-left THE breadcrumbs SHALL lay the trail out from the right — the top of the hierarchy at the right and the page at the left, a level's glyph at the right of its label, the menu opening with its right edge on the button's — and SHALL draw each separator mirrored left to right, pointing to the left, the way the trail reads: the icon helper mirrors it inside its own box because the system's icon set marks chevron_right as mirrored. It SHALL draw a level's own glyph mirrored exactly when the icon set marks that glyph's name or the product forces mirroring for that use, and unmirrored when the product forbids it. THE breadcrumbs SHALL NOT mirror a glyph itself, and the reading and focus order SHALL stay from the top of the hierarchy to the page.
`BRC-28`	THE breadcrumbs SHALL lay out each label as text of its own direction, isolated from the text around it: it takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right name, a number with its sign or unit and a version keep their own order in a right-to-left layout and reorder nothing beside them; THE breadcrumbs SHALL still place the label by the layout direction, not by the text's own, and SHALL cut a label that does not fit (BRC-14) at the end of its own direction, so that a left-to-right label in a right-to-left layout loses its right end and never its beginning.
`BRC-29`	WHEN overflow names a value the breadcrumbs does not have THE breadcrumbs SHALL behave as collapse, and in debug builds report the unknown value.
`BRC-30`	THE breadcrumbs SHALL show the underline of every level that is a link as its underline prop names: WHILE underline is auto, as comp.breadcrumbs.underline.visibility names, which follows sys.behavior.link-underline unless a design system sets the trail apart; WHILE underline is always, hover or never, as that value names, whatever the tokens say. always draws the line at rest and in every state; hover draws none at rest and draws it WHILE the level is hovered, keyboard-focused or pressed, the line arriving and leaving with that state as BRC-16 renders it and moving no level; never draws none in any state, and hover, focus and press are still shown by the container, the label color and the focus ring. The links of the overflow menu are menu items and are never underlined. WHEN underline, or the token it follows, changes THE breadcrumbs SHALL draw the other form at once, keeping its focus and what it has collapsed; WHEN underline names a value the breadcrumbs does not define THE breadcrumbs SHALL treat it as auto and in debug builds report the unknown value. A platform that cannot draw a choice SHALL fall back to the first value, always, and state that in its README.
`BRC-31`	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE breadcrumbs SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on its navigation landmark (BRC-1) — an id reference by the elements it names in the host's tree or a tree around it, a description after its own. WHILE label is not empty it is the landmark's name, over a name given so; WHILE label is empty, a name given so is the landmark's name and SHALL NOT be reported as having none in debug builds. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE breadcrumbs SHALL take it off that element.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	`tanrei-breadcrumbs`	`TanreiBreadcrumbs`	`TanreiBreadcrumbs`	`TanreiBreadcrumbs`	`Breadcrumbs`
`label` · प्रॉपर्टी	`label`	`label`	`contentDescription`	`semanticLabel`	`accessibilityLabel`
`overflow` · प्रॉपर्टी	`overflow`	`overflow`	`overflow`	`overflow`	`overflow`
`overflowLabel` · प्रॉपर्टी	`overflowLabel`	`overflowLabel`	`overflowContentDescription`	`overflowSemanticLabel`	`overflowAccessibilityLabel`
`underline` · प्रॉपर्टी	`underline`	`underline`	`underline`	`underline`	`underline`
टिप्पणियाँ	An element around the product's own anchors, which stay in the document (BRC-2, BRC-13): `<tanrei-breadcrumbs label="Breadcrumbs" overflow-label="Show hidden levels"><a href="/">Home</a><a href="/components/">Components</a><span aria-current="page">Button</span></tanrei-breadcrumbs>`. It is an element and not a class, as Link and Previous and next links are, because collapsing by width has to measure, which a stylesheet cannot do. The shadow root holds the landmark (`<nav aria-label>`), the ordered list with one `<li>` and one slot for each child (assigned by the element), the separators, and the overflow `<li>` with its button and a `tanrei-menu` whose items are links to the hidden levels; a hidden level's `<li>` is not displayed, and its anchor is still in the document. Before the element is defined, and with scripting off, a rule of the package's stylesheet for `tanrei-breadcrumbs:not(:defined)` draws the children as the wrap form — every level, separators from the icon font, links underlined — so the trail is complete and usable without script, without the landmark. `overflow-label` is the attribute of `overflowLabel`. The levels in the trail take the Link stylesheet's rules for a standalone link with this component's tokens. The menu's items are the menu's link items (MNU-53 to MNU-57). React: `Breadcrumbs` renders the element and its children and takes a `render` prop for a router's link. `underline="always \| hover \| never"` on the element; without it the trail follows `--tanrei-comp-breadcrumbs-underline-visibility`, read as the Link reads its own (a container style query, and `data-underline-system` on the document's root where the browser has none). The slotted anchors are styled by the element's `::slotted` rules, so the choice needs nothing on the anchors themselves.	`TanreiBreadcrumbs(label:overflowLabel:overflow:items:)`. Levels are built on SwiftUI's `Link`; the trail measures itself in a custom `Layout` and collapses there; the menu is `TanreiMenu`. The container is an accessibility container named by `label`; the current page has the `isSelected` trait. Not built on this platform yet: `underline`, an optional value of the same enumeration the Link takes; absent is auto.	`TanreiBreadcrumbs(items, contentDescription, overflowContentDescription, overflow, modifier)`. A custom `Layout` (or `SubcomposeLayout`) measures and collapses; the menu is `TanreiMenu`. Compose has no navigation landmark and no link role for a clickable element: the row is a semantics group with `collectionInfo`, the current page is `selected`, and the README says what is not exposed. Not built on this platform yet: `underline`, an optional value of the same enumeration the Link takes; absent is auto.	`TanreiBreadcrumbs(items: …, semanticLabel: …, overflowSemanticLabel: …, overflow: …)`. A `MultiChildRenderObjectWidget` (or `CustomMultiChildLayout`) measures and collapses; the menu is `TanreiMenu`. `Semantics(container: true, label:)` around the row; each link `Semantics(link: true)`, the current page `selected`. Not built on this platform yet: `underline`, an optional value of the same enumeration the Link takes; absent is auto.	`<Breadcrumbs accessibilityLabel="Breadcrumbs" overflowAccessibilityLabel="Show hidden levels" items={[…]} />`. Each link is a `Text` with `accessibilityRole="link"`; the trail measures its levels with `onLayout` and collapses in a second pass; the menu is `Menu`. `accessibilityState` carries `selected` for the current page. Follows the app's direction where an ancestor's is not known. Not built on this platform yet: `underline`, an optional value of the same enumeration the Link takes; absent is auto.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
`--tanrei-comp-breadcrumbs-container-gap`	`sys.space.space50`	4px
`--tanrei-comp-breadcrumbs-container-shape`	`sys.shape.corner.extra-small`	3px
`--tanrei-comp-breadcrumbs-current-container-color`	—	#000000 · 0%
`--tanrei-comp-breadcrumbs-current-content-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-breadcrumbs-current-focused-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-breadcrumbs-current-focused-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-hovered-container-color`	—	#1b1b1b · 8%
`--tanrei-comp-breadcrumbs-current-hovered-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-pressed-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-breadcrumbs-current-pressed-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-current-state-layer-color`	`comp.breadcrumbs.current.content.color`	#1b1b1b
`--tanrei-comp-breadcrumbs-focused-container-shape`	—	3px
`--tanrei-comp-breadcrumbs-focused-opacity`	—	1
`--tanrei-comp-breadcrumbs-hovered-container-shape`	—	3px
`--tanrei-comp-breadcrumbs-hovered-opacity`	—	1
`--tanrei-comp-breadcrumbs-icon-size`	`sys.icon.extra-small`	16px
`--tanrei-comp-breadcrumbs-item-container-color`	—	#000000 · 0%
`--tanrei-comp-breadcrumbs-item-content-color`	`sys.color.link`	#1b1b1b
`--tanrei-comp-breadcrumbs-item-focused-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-breadcrumbs-item-focused-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-hovered-container-color`	—	#1b1b1b · 8%
`--tanrei-comp-breadcrumbs-item-hovered-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-pressed-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-breadcrumbs-item-pressed-content-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-breadcrumbs-item-state-layer-color`	`comp.breadcrumbs.item.content.color`	#1b1b1b
`--tanrei-comp-breadcrumbs-label-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-breadcrumbs-motion-feedback-duration`	`sys.motion.role.feedback`	450ms
`--tanrei-comp-breadcrumbs-motion-state-duration`	`sys.motion.role.state.compact`	200ms
`--tanrei-comp-breadcrumbs-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-breadcrumbs-overflow-container-color`	—	#000000 · 0%
`--tanrei-comp-breadcrumbs-overflow-content-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-focused-container-color`	—	#4b4b4b · 10%
`--tanrei-comp-breadcrumbs-overflow-focused-content-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-focused-state-layer-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-hovered-container-color`	—	#4b4b4b · 8%
`--tanrei-comp-breadcrumbs-overflow-hovered-content-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-hovered-state-layer-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-pressed-container-color`	—	#4b4b4b · 10%
`--tanrei-comp-breadcrumbs-overflow-pressed-content-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-pressed-state-layer-color`	—	#4b4b4b
`--tanrei-comp-breadcrumbs-overflow-state-layer-color`	`comp.breadcrumbs.overflow.content.color`	#4b4b4b
`--tanrei-comp-breadcrumbs-pressed-container-shape`	—	3px
`--tanrei-comp-breadcrumbs-pressed-opacity`	—	1
`--tanrei-comp-breadcrumbs-row-gap`	`sys.space.space50`	4px
`--tanrei-comp-breadcrumbs-separator-color`	`sys.color.on-surface-variant`	#4b4b4b
`--tanrei-comp-breadcrumbs-separator-gap`	`sys.space.space50`	4px
`--tanrei-comp-breadcrumbs-separator-size`	`sys.icon.extra-small`	16px
`--tanrei-comp-breadcrumbs-underline-offset`	`sys.space.space25`	2px
`--tanrei-comp-breadcrumbs-underline-visibility`	`sys.behavior.link-underline`	0
`--tanrei-comp-breadcrumbs-underline-width`	`sys.border.hairline`	1px
`--tanrei-comp-breadcrumbs-label-typescale`	`sys.typescale.body`	400 14px/1.5714

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

default