@xsolla/xui-breadcrumbs 0.174.3 → 0.175.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,43 @@
|
|
|
1
1
|
# Breadcrumbs
|
|
2
2
|
|
|
3
3
|
A breadcrumb trail showing a page's location within a hierarchy. Renders a `<nav aria-label="Breadcrumb">` with an ordered list, a default chevron separator, and three size variants.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:breadcrumbs -->
|
|
5
|
+
Breadcrumbs show the user's location within a hierarchy and provide a path back to higher levels. Each item is a link to its level, separated by a divider, with the last item marking the current page.
|
|
6
|
+
|
|
7
|
+
### When to use
|
|
8
|
+
|
|
9
|
+
- To show where the user is within a nested site or app structure
|
|
10
|
+
- To give a quick way back to parent levels in deep hierarchies
|
|
11
|
+
|
|
12
|
+
### When not to use
|
|
13
|
+
|
|
14
|
+
- For flat structures with no real hierarchy
|
|
15
|
+
- As primary or main navigation
|
|
16
|
+
|
|
17
|
+
### Content guidelines
|
|
18
|
+
- Keep each crumb short and match it to the page or level it represents.
|
|
19
|
+
- The last item is the current page and is not a link.
|
|
20
|
+
- When the path is long (4+), collapse the middle items into *"…"* rather than wrapping.
|
|
21
|
+
- Use a single, consistent separator between items.
|
|
22
|
+
|
|
23
|
+
### Behaviour guidelines
|
|
24
|
+
|
|
25
|
+
Item Count sets how many levels are shown; every item except the last links to its level, and the last is the current, non-interactive page.
|
|
26
|
+
|
|
27
|
+
4+ — middle items collapse into a *"…"* that can reveal the hidden levels.
|
|
28
|
+
|
|
29
|
+
Truncate overly long labels rather than letting the trail wrap or push layout.
|
|
30
|
+
|
|
31
|
+
### Accessibility
|
|
32
|
+
|
|
33
|
+
Expose the breadcrumbs as a navigation landmark with an accessible name (e.g. *"Breadcrumb"*).
|
|
34
|
+
|
|
35
|
+
Mark the current page with aria-current=*"page"*.
|
|
36
|
+
|
|
37
|
+
Treat separators as decorative so they aren't announced as content.
|
|
38
|
+
|
|
39
|
+
If the path is collapsed, make the *"…"* control keyboard-accessible and clearly labelled.
|
|
40
|
+
<!-- END:xui-mcp-instructions:breadcrumbs -->
|
|
4
41
|
|
|
5
42
|
## Installation
|
|
6
43
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-breadcrumbs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.175.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.175.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0"
|