Skip to content
On this page

Breadcrumbs

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.

preview
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>

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.

preview
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>
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>

PropsTypeDefaultDescription
itemsArray-Breadcrumb items (array of object)

Slots <p-breadcrumb>

NameDescription
defaultContent to place breadcrumb item

Props <p-breadcrumb-item>

PropsTypeDefaultDescription
textString-Breadcrumb item label
activeBooleanfalseBreadcrumb item active state
hrefString-Target URL of the breadcrumb item link

Slots <p-breadcrumb-item>

NameDescription
defaultContent to place breadcrumb item label

Props <p-breadcrumb-item-dropdown>

PropsTypeDefaultDescription
textString-Breadcrumb item dropdown activator label
activeBooleanfalseBreadcrumb item dropdown activator active state
hrefString-Target URL of the breadcrumb item dropdown activator link

Slots <p-breadcrumb-item-dropdown>

NameDescription
defaultContent to place dropdown item

Events

NameArgumentsDescription
There no event here

Released under the MIT License.