Breadcrumb - Pharen

Use Breadcrumb to show the current location in a hierarchy. This page covers every Vue component exported by the public module.

Install the package and import its styles once. See Installation for the complete setup.

Import

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@pharen/ui';

Example

<script setup lang="ts">
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@pharen/ui';
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

Exports

Export	Purpose
`Breadcrumb`	Exported Vue component from this module.
`BreadcrumbEllipsis`	Exported Vue component from this module.
`BreadcrumbItem`	Represents one item.
`BreadcrumbLink`	Exported Vue component from this module.
`BreadcrumbList`	Exported Vue component from this module.
`BreadcrumbPage`	Exported Vue component from this module.
`BreadcrumbSeparator`	Separates adjacent regions.

Source

Open the source on GitHub