@startupjs-ui/breadcrumbs 0.1.13 → 0.1.16
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/CHANGELOG.md +8 -0
- package/README.mdx +16 -5
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/breadcrumbs
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @startupjs-ui/breadcrumbs
|
package/README.mdx
CHANGED
|
@@ -5,7 +5,8 @@ import { faAnchor, faBook, faGift, faHome, faRocket } from '@fortawesome/free-so
|
|
|
5
5
|
import { Sandbox } from '@startupjs-ui/docs'
|
|
6
6
|
|
|
7
7
|
# Breadcrumbs
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
Breadcrumbs show the current page's location within a navigational hierarchy and let users navigate back through parent pages.
|
|
9
10
|
|
|
10
11
|
```jsx
|
|
11
12
|
import { Breadcrumbs } from 'startupjs-ui'
|
|
@@ -13,6 +14,8 @@ import { Breadcrumbs } from 'startupjs-ui'
|
|
|
13
14
|
|
|
14
15
|
## Simple example
|
|
15
16
|
|
|
17
|
+
Pass an array of route objects to the `routes` prop. Each route has a `to` path and a `name` label. The last route in the array is displayed as the active (current) page and is not clickable.
|
|
18
|
+
|
|
16
19
|
```jsx example
|
|
17
20
|
return (
|
|
18
21
|
<Breadcrumbs
|
|
@@ -38,9 +41,9 @@ return (
|
|
|
38
41
|
)
|
|
39
42
|
```
|
|
40
43
|
|
|
41
|
-
## Custom
|
|
44
|
+
## Custom separator
|
|
42
45
|
|
|
43
|
-
|
|
46
|
+
The separator between routes is `/` by default. You can change it by passing a string or a custom React node to the `separator` prop.
|
|
44
47
|
|
|
45
48
|
```jsx example
|
|
46
49
|
return (
|
|
@@ -70,7 +73,7 @@ return (
|
|
|
70
73
|
|
|
71
74
|
## Icons
|
|
72
75
|
|
|
73
|
-
Each route object accepts
|
|
76
|
+
Each route object accepts an optional `icon` prop. To change the icon's position relative to the label, use the `iconPosition` prop on the Breadcrumbs component (`left` by default).
|
|
74
77
|
|
|
75
78
|
```jsx example
|
|
76
79
|
return (
|
|
@@ -104,7 +107,7 @@ return (
|
|
|
104
107
|
|
|
105
108
|
## Sizes
|
|
106
109
|
|
|
107
|
-
|
|
110
|
+
The `size` prop controls the dimensions of the text and icons. The default value is `m`. Available sizes are `s`, `m`, and `l`. See all available values in the Sandbox section at the bottom of the page.
|
|
108
111
|
|
|
109
112
|
```jsx example
|
|
110
113
|
return (
|
|
@@ -156,6 +159,14 @@ return (
|
|
|
156
159
|
)
|
|
157
160
|
```
|
|
158
161
|
|
|
162
|
+
## Navigation behavior
|
|
163
|
+
|
|
164
|
+
By default, clicking a breadcrumb pushes a new entry onto the browser history stack. Set the `replace` prop to `true` to replace the current history entry instead, which prevents the user from navigating back to the replaced page.
|
|
165
|
+
|
|
166
|
+
## Custom styles
|
|
167
|
+
|
|
168
|
+
Use the `style` prop to apply custom styles to the root container element.
|
|
169
|
+
|
|
159
170
|
## Sandbox
|
|
160
171
|
|
|
161
172
|
<Sandbox
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/breadcrumbs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,15 +9,15 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@startupjs-ui/core": "^0.1.11",
|
|
12
|
-
"@startupjs-ui/div": "^0.1.
|
|
13
|
-
"@startupjs-ui/icon": "^0.1.
|
|
14
|
-
"@startupjs-ui/link": "^0.1.
|
|
15
|
-
"@startupjs-ui/span": "^0.1.
|
|
12
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
13
|
+
"@startupjs-ui/icon": "^0.1.16",
|
|
14
|
+
"@startupjs-ui/link": "^0.1.16",
|
|
15
|
+
"@startupjs-ui/span": "^0.1.16"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": "*",
|
|
19
19
|
"react-native": "*",
|
|
20
20
|
"startupjs": "*"
|
|
21
21
|
},
|
|
22
|
-
"gitHead": "
|
|
22
|
+
"gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
|
|
23
23
|
}
|