Breadcrumbs
Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content.
<Breadcrumb :items="[
{
text: 'Home',
href: 'https://google.com'
},
{
text: 'Posts',
to: { name: 'home' }
},
{
text: 'Another Story',
active: true
}
]"></Breadcrumb>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Breadcrumb items
Items are rendered using : prop. It can be an array of objects to provide link and active state. Links can be href's for anchor tags, or to's for router-links. Active state of last element is automatically set if it is undefined.items
const items = [
{
text: 'Home',
href: 'https://google.com'
},
{
text: 'Posts',
to: {name: 'home'}
},
{
text: 'Another Story',
active: true
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Manually placed items
You may also manually place individual <BreadcrumbItem> child components in the default slot of the <Breadcrumb> component, as an alternative to using the items prop, for greater control over the content of each item:
<Breadcrumb>
<BreadcrumbItem href="#home">
<Icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></Icon>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#foo">Foo</BreadcrumbItem>
<BreadcrumbItem href="#bar">Bar</BreadcrumbItem>
<BreadcrumbItem active>Baz</BreadcrumbItem>
</Breadcrumb>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Remember to set the active prop on the last item.