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.

• Dashboard
• All Documents

preview

<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 with / Divider

• Dashboard
  /
• All Documents

preview

<template>
  <p-breadcrumb :items="items">
    <template #divider>
      /
    </template>
  </p-breadcrumb>
</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

preview

<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

• Dashboard
• WaitingDoneArchived

preview

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

• Dashboard
• Settings
• Change Password Create Signature Change OTP Method

preview

<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
divider	Specifies the dividing character/icon between items

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