Skip to content

Commit c8e08e5

Browse files
author
Birrer, Iwan
committed
chore: improve breadcrumbs component
1 parent a996f3d commit c8e08e5

19 files changed

Lines changed: 619 additions & 130 deletions

‎docs/components/six-breadcrumbs-item.md‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
1-
# six-breadcrumb-item
1+
# Breadcrumbs Item
2+
3+
4+
Breadcrumb items are intended for use with the six-breadcrumbs component. For usage details, see the [six-breadcrumbs documentation](six-breadcrumbs.html).
5+
6+
<docs-demo-six-breadcrumbs-item-0></docs-demo-six-breadcrumbs-item-0>
7+
8+
```html
9+
<six-breadcrumbs>
10+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
11+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
12+
<six-breadcrumbs-item>C</six-breadcrumbs-item>
13+
</six-breadcrumbs>
14+
```
15+
16+
217

318
<!-- Auto Generated Below -->
419

520

21+
## Overview
22+
23+
Breadcrumb items are used inside breadcrumbs to represent different links.
24+
625
## Properties
726

827
| Property | Attribute | Description | Type | Default |
@@ -20,13 +39,31 @@
2039
| `six-click` | Emitted when the breadcrumb item is clicked. | `CustomEvent<undefined>` |
2140

2241

42+
## Slots
43+
44+
| Slot | Description |
45+
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
46+
| | The breadcrumb item’s label. |
47+
| `"prefix"` | An optional prefix, usually an icon or icon button. |
48+
| `"separator"` | The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead. |
49+
| `"suffix"` | An optional suffix, usually an icon or icon button. |
50+
51+
2352
## Shadow Parts
2453

25-
| Part | Description |
26-
| ------------- | ----------- |
27-
| `"base"` | |
28-
| `"button"` | |
29-
| `"separator"` | |
54+
| Part | Description |
55+
| ------------- | -------------------------------- |
56+
| `"base"` | The component's base wrapper. |
57+
| `"button"` | The button that renders the item |
58+
| `"separator"` | The separator |
59+
60+
61+
## CSS Custom Properties
62+
63+
| Name | Description |
64+
| ------------------- | -------------------------------------- |
65+
| `--last-item-color` | The color of the last breadcrumbs item |
66+
| `--separator-color` | The color of the separator |
3067

3168

3269
## Dependencies

‎docs/components/six-breadcrumbs.md‎

Lines changed: 148 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,158 @@
11
# Breadcrumbs
22

3+
4+
Breadcrumbs provide a group of links so users can easily navigate a website’s hierarchy. Breadcrumbs are usually placed before a page’s main content with the current page shown last to indicate the user’s position in the navigation.
5+
6+
<docs-demo-six-breadcrumbs-0></docs-demo-six-breadcrumbs-0>
7+
8+
```html
9+
<six-breadcrumbs>
10+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
11+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
12+
<six-breadcrumbs-item>C</six-breadcrumbs-item>
13+
</six-breadcrumbs>
14+
```
15+
16+
17+
## Custom Separators
18+
19+
Use the separator slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
20+
21+
<docs-demo-six-breadcrumbs-1></docs-demo-six-breadcrumbs-1>
22+
23+
```html
24+
<six-breadcrumbs>
25+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
26+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
27+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
28+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
29+
</six-breadcrumbs>
30+
```
31+
32+
33+
## Prefixes
34+
35+
Use the prefix slot to add content before any breadcrumb item.
36+
37+
<docs-demo-six-breadcrumbs-2></docs-demo-six-breadcrumbs-2>
38+
39+
```html
40+
<six-breadcrumbs>
41+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
42+
<six-breadcrumbs-item>
43+
<six-icon slot="prefix" size="small">house</six-icon>
44+
Home
45+
</six-breadcrumbs-item>
46+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
47+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
48+
</six-breadcrumbs>
49+
```
50+
51+
52+
## Suffixes
53+
54+
Use the suffix slot to add content after any breadcrumb item.
55+
56+
<docs-demo-six-breadcrumbs-3></docs-demo-six-breadcrumbs-3>
57+
58+
```html
59+
<six-breadcrumbs>
60+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
61+
<six-breadcrumbs-item>Home</six-breadcrumbs-item>
62+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
63+
<six-breadcrumbs-item>
64+
<six-icon slot="suffix" size="small">lock</six-icon>
65+
Current
66+
</six-breadcrumbs-item>
67+
</six-breadcrumbs>
68+
```
69+
70+
71+
## Styling
72+
73+
Use CSS custom properties to customize the appearance of breadcrumb items.
74+
75+
<docs-demo-six-breadcrumbs-4></docs-demo-six-breadcrumbs-4>
76+
77+
```html
78+
<div class="parent">
79+
<six-breadcrumbs>
80+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
81+
<six-breadcrumbs-item>Home</six-breadcrumbs-item>
82+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
83+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
84+
</six-breadcrumbs>
85+
</div>
86+
87+
<style>
88+
.parent six-breadcrumbs-item {
89+
--separator-color: var(--six-color-web-rock-900);
90+
--last-item-color: var(--six-color-danger-900);
91+
}
92+
.parent {
93+
background-color: var(--six-color-web-rock-100);
94+
95+
six-breadcrumbs-item::part(separator) {
96+
margin: 0 var(--six-spacing-large);
97+
}
98+
}
99+
</style>
100+
```
101+
102+
103+
## Dynamically Add/Remove Items
104+
105+
Items can be dynamically added and removed.
106+
107+
<docs-demo-six-breadcrumbs-5></docs-demo-six-breadcrumbs-5>
108+
109+
```html
110+
<six-button type="secondary" id="remove-button">Remove</six-button>
111+
<six-button type="secondary" id="add-button">Add</six-button>
112+
113+
<six-breadcrumbs id="dynamic-breadcrumbs">
114+
<six-breadcrumbs-item>Item 0</six-breadcrumbs-item>
115+
<six-breadcrumbs-item>Item 1</six-breadcrumbs-item>
116+
</six-breadcrumbs>
117+
118+
<script type="module">
119+
let counter = 2;
120+
const breadcrumbs = document.getElementById('dynamic-breadcrumbs');
121+
122+
document.getElementById('remove-button').addEventListener('click', () => {
123+
breadcrumbs.lastElementChild?.remove();
124+
});
125+
126+
document.getElementById('add-button').addEventListener('click', () => {
127+
const item = document.createElement('six-breadcrumbs-item');
128+
item.textContent = `Item ${counter++}`;
129+
breadcrumbs.append(item);
130+
});
131+
</script>
132+
```
133+
134+
135+
3136
<!-- Auto Generated Below -->
4137
5138
139+
## Overview
140+
141+
Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
142+
143+
## Slots
144+
145+
| Slot | Description |
146+
| ------------- | ------------------------------------------------------------------------ |
147+
| | One or more breadcrumb items to display. |
148+
| `"separator"` | The separator to use between breadcrumb items. Works best with six-icon. |
149+
150+
6151
## Shadow Parts
7152
8-
| Part | Description |
9-
| -------- | ----------- |
10-
| `"base"` | |
153+
| Part | Description |
154+
| -------- | ----------------------------- |
155+
| `"base"` | The component's base wrapper. |
11156
12157
13158
----------------------------------------------

‎docs/examples/docs-demo-six-breadcrumbs-0.vue‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
11
<template>
22
<div>
33

4-
<p>Character / as default separators</p>
54
<six-breadcrumbs>
65
<six-breadcrumbs-item>A</six-breadcrumbs-item>
76
<six-breadcrumbs-item>B</six-breadcrumbs-item>
87
<six-breadcrumbs-item>C</six-breadcrumbs-item>
98
</six-breadcrumbs>
10-
11-
<p>six-icon as separators and with a prefix</p>
12-
<six-breadcrumbs>
13-
<six-icon slot="separator" size="small">arrow_forward</six-icon>
14-
<six-breadcrumbs-item href="http://six-group.com" target="_blank">
15-
<six-icon slot="prefix" size="small">house</six-icon>
16-
Home
17-
</six-breadcrumbs-item>
18-
<six-breadcrumbs-item href="http://six-group.com" target="_blank">A</six-breadcrumbs-item>
19-
<six-breadcrumbs-item href="http://six-group.com" target="_blank">B</six-breadcrumbs-item>
20-
<six-breadcrumbs-item href="http://six-group.com" target="_blank">Current</six-breadcrumbs-item>
21-
</six-breadcrumbs>
229

2310
</div>
2411
</template>

‎docs/examples/docs-demo-six-breadcrumbs-1.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div>
3+
4+
<six-breadcrumbs>
5+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
6+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
7+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
8+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
9+
</six-breadcrumbs>
10+
11+
</div>
12+
</template>
13+
<style>
14+
15+
</style>
16+
<script>
17+
export default {
18+
name: 'docs-demo-six-breadcrumbs-1',
19+
mounted() { }
20+
}
21+
</script>

‎docs/examples/docs-demo-six-breadcrumbs-2.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
4+
<six-breadcrumbs>
5+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
6+
<six-breadcrumbs-item>
7+
<six-icon slot="prefix" size="small">house</six-icon>
8+
Home
9+
</six-breadcrumbs-item>
10+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
11+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
12+
</six-breadcrumbs>
13+
14+
</div>
15+
</template>
16+
<style>
17+
18+
</style>
19+
<script>
20+
export default {
21+
name: 'docs-demo-six-breadcrumbs-2',
22+
mounted() { }
23+
}
24+
</script>

‎docs/examples/docs-demo-six-breadcrumbs-3.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
4+
<six-breadcrumbs>
5+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
6+
<six-breadcrumbs-item>Home</six-breadcrumbs-item>
7+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
8+
<six-breadcrumbs-item>
9+
<six-icon slot="suffix" size="small">lock</six-icon>
10+
Current
11+
</six-breadcrumbs-item>
12+
</six-breadcrumbs>
13+
14+
</div>
15+
</template>
16+
<style>
17+
18+
</style>
19+
<script>
20+
export default {
21+
name: 'docs-demo-six-breadcrumbs-3',
22+
mounted() { }
23+
}
24+
</script>

‎docs/examples/docs-demo-six-breadcrumbs-4.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div>
3+
4+
<div class="parent">
5+
<six-breadcrumbs>
6+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
7+
<six-breadcrumbs-item>Home</six-breadcrumbs-item>
8+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
9+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
10+
</six-breadcrumbs>
11+
</div>
12+
13+
14+
15+
</div>
16+
</template>
17+
<style>
18+
19+
.parent six-breadcrumbs-item {
20+
--separator-color: var(--six-color-web-rock-900);
21+
--last-item-color: var(--six-color-danger-900);
22+
}
23+
.parent {
24+
background-color: var(--six-color-web-rock-100);
25+
26+
six-breadcrumbs-item::part(separator) {
27+
margin: 0 var(--six-spacing-large);
28+
}
29+
}
30+
31+
</style>
32+
<script>
33+
export default {
34+
name: 'docs-demo-six-breadcrumbs-4',
35+
mounted() { }
36+
}
37+
</script>

0 commit comments

Comments
 (0)