Breadcrumb
Page hierarchy navigation
Default
Usage
tsx
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@tryvienna/ui'
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Examples
Default
Default
tsx
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
With Ellipsis
With Ellipsis
tsx
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Library</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Data</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
API Reference
Breadcrumb
Also accepts all props from nav.
BreadcrumbList
Also accepts all props from ol.
BreadcrumbItem
Also accepts all props from li.
BreadcrumbLink
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | - |
Also accepts all props from a.
BreadcrumbPage
Also accepts all props from span.
BreadcrumbSeparator
Also accepts all props from li.
BreadcrumbEllipsis
Also accepts all props from span.
Data Attributes
| Component | data-slot |
|---|---|
Breadcrumb | "breadcrumb" |
BreadcrumbList | "breadcrumb-list" |
BreadcrumbItem | "breadcrumb-item" |
BreadcrumbLink | "breadcrumb-link" |
BreadcrumbPage | "breadcrumb-page" |
BreadcrumbSeparator | "breadcrumb-separator" |
BreadcrumbEllipsis | "breadcrumb-ellipsis" |