Skip to content

Commit b31a49a

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

17 files changed

Lines changed: 472 additions & 107 deletions

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

Lines changed: 30 additions & 1 deletion
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,6 +39,16 @@
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

2554
| Part | Description |

‎docs/components/six-breadcrumbs.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,117 @@
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 {
89+
--six-breadcrumbs-separator-color: var(--six-color-web-rock-900);
90+
--six-breadcrumbs-last-item-color: var(--six-color-danger-900);
91+
}
92+
.parent {
93+
background-color: var(--six-color-web-rock-100);
94+
}
95+
</style>
96+
```
97+
98+
99+
3100
<!-- Auto Generated Below -->
4101

5102

103+
## Overview
104+
105+
Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
106+
107+
## Slots
108+
109+
| Slot | Description |
110+
| ------------- | ---------------------------------------------------------------------------- |
111+
| | One or more breadcrumb items to display. |
112+
| `"separator"` | The separator to use between breadcrumb items. Works best with <six-icon />. |
113+
114+
6115
## Shadow Parts
7116

8117
| Part | Description |

‎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: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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 {
20+
--six-breadcrumbs-separator-color: var(--six-color-web-rock-900);
21+
--six-breadcrumbs-last-item-color: var(--six-color-danger-900);
22+
}
23+
.parent {
24+
background-color: var(--six-color-web-rock-100);
25+
}
26+
27+
</style>
28+
<script>
29+
export default {
30+
name: 'docs-demo-six-breadcrumbs-4',
31+
mounted() { }
32+
}
33+
</script>

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

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

4-
<p>Character / as separators</p>
54
<six-breadcrumbs>
6-
<span slot="separator">/</span>
75
<six-breadcrumbs-item>A</six-breadcrumbs-item>
86
<six-breadcrumbs-item>B</six-breadcrumbs-item>
97
<six-breadcrumbs-item>C</six-breadcrumbs-item>
108
</six-breadcrumbs>
11-
12-
<p>six-icon as separators and with a prefix</p>
13-
<six-breadcrumbs>
14-
<six-icon slot="separator" size="small">arrow_forward</six-icon>
15-
<six-breadcrumbs-item href="http://six-group.com" target="_blank">
16-
<six-icon slot="prefix" size="small">house</six-icon>
17-
Home
18-
</six-breadcrumbs-item>
19-
<six-breadcrumbs-item href="http://six-group.com" target="_blank">A</six-breadcrumbs-item>
20-
<six-breadcrumbs-item href="http://six-group.com" target="_blank">B</six-breadcrumbs-item>
21-
<six-breadcrumbs-item href="http://six-group.com" target="_blank">Current</six-breadcrumbs-item>
22-
</six-breadcrumbs>
239

2410
</div>
2511
</template>

0 commit comments

Comments
 (0)