PersonaBreadcrumbs
The current page's location within a navigational hierarchy
Usage
Simple Usage
Items of breadcrumbs are rendered using items prop. It can be an array of object to provide text, link and active state.
- Dashboard
- All Documents
vue
<script>
import { defineNavigation } from '@privyid/persona/core'
const items = defineNavigation([
{
text: 'Dashboard',
href: '/'
},
{
text: 'All Documents',
active: true
}
])
</script>
<template>
<p-breadcrumb :items="items" />
</template>Breadcrumb Item
Individual <p-breadcrumb-item> can be placed manually in the default slot of <p-breadcrumb>. The permalink can be set with href prop, then active prop for active state.
- Dashboard
- User Profile
- Change Password
vue
<template>
<p-breadcrumb>
<p-breadcrumb-item href="#dashboard">
Dashboard
</p-breadcrumb-item>
<p-breadcrumb-item href="#user">
User Profile
</p-breadcrumb-item>
<p-breadcrumb-item active>
Change Password
</p-breadcrumb-item>
</p-breadcrumb>
</template>Breadcrumb Dropdown
vue
<template>
<script>
import { defineNavigation } from '@privyid/persona/core'
const items = defineNavigation([
{
text: 'Dashboard',
href: '#',
},
{
text: 'Document',
active: true,
subitem: [
{
text: 'Waiting',
href: '#',
active: true,
},
{
text: 'Done',
href: '#'
},
{
text: 'Archived',
href: '#'
}
]
},
])
</script>
<p-breadcrumb :items="items" />
</template><p-breadcrumb-item-dropdown> also can be placed manually in the default slot of <p-breadcrumb> with the combination of <p-dropdown-item> child component.
vue
<template>
<p-breadcrumb>
<p-breadcrumb-item href="#dashboard">
Dashboard
</p-breadcrumb-item>
<p-breadcrumb-item href="#settings">
Settings
</p-breadcrumb-item>
<p-breadcrumb-item-dropdown text="Account" active>
<p-dropdown-item href=#>
Change Password
</p-dropdown-item>
<p-dropdown-item href="#" active>
Create Signature
</p-dropdown-item>
<p-dropdown-item href="#">
Change OTP Method
</p-dropdown-item>
</p-breadcrumb-item-dropdown>
</p-breadcrumb>
</template>API
Props <p-breadcrumb>
| Props | Type | Default | Description |
|---|---|---|---|
items | Array | - | Breadcrumb items (array of object) |
Slots <p-breadcrumb>
| Name | Description |
|---|---|
default | Content to place breadcrumb item |
Props <p-breadcrumb-item>
| Props | Type | Default | Description |
|---|---|---|---|
text | String | - | Breadcrumb item label |
active | Boolean | false | Breadcrumb item active state |
href | String | - | Target URL of the breadcrumb item link |
Slots <p-breadcrumb-item>
| Name | Description |
|---|---|
default | Content to place breadcrumb item label |
Props <p-breadcrumb-item-dropdown>
| Props | Type | Default | Description |
|---|---|---|---|
text | String | - | Breadcrumb item dropdown activator label |
active | Boolean | false | Breadcrumb item dropdown activator active state |
href | String | - | Target URL of the breadcrumb item dropdown activator link |
Slots <p-breadcrumb-item-dropdown>
| Name | Description |
|---|---|
default | Content to place dropdown item |
Events
| Name | Arguments | Description |
|---|---|---|
| There no event here | ||