Phi
Phi
Breadcrumbs
@dicehub/phiv1.0.0-beta.1

Breadcrumbs

A navigation component that shows the current page's location within a hierarchy.

<script setup>
import { PhHouse } from "@phosphor-icons/vue";
import { Breadcrumbs } from "@dicehub/phi/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs>
    <Breadcrumbs.Link :icon="PhHouse" :icon-props="{ size: 16 }" href="#">
      Home
    </Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Projects</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Current Project</Breadcrumbs.Current>
  </Breadcrumbs>
</template>

Installation

Use the root package while prototyping, or the component entrypoint for granular imports.

import { Breadcrumbs } from "@dicehub/phi";
// or use the component entrypoint:
// import { Breadcrumbs } from "@dicehub/phi/components/breadcrumbs";

Usage

<script setup>
import { Breadcrumbs } from "@dicehub/phi/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs>
    <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
  </Breadcrumbs>
</template>

Use Breadcrumbs.Current for the active page and keep it non-interactive.

Examples

Basic

<script setup>
import { Breadcrumbs } from "@dicehub/phi/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs>
    <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
  </Breadcrumbs>
</template>

Loading

<script setup>
import { PhHouse } from "@phosphor-icons/vue";
import { Breadcrumbs } from "@dicehub/phi/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs>
    <Breadcrumbs.Link :icon="PhHouse" :icon-props="{ size: 16 }" href="#">
      Home
    </Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current loading />
  </Breadcrumbs>
</template>

Root

<script setup>
import { PhHouse } from "@phosphor-icons/vue";
import { Breadcrumbs } from "@dicehub/phi/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs>
    <Breadcrumbs.Current :icon="PhHouse" :icon-props="{ size: 16 }">
      Worker Analytics
    </Breadcrumbs.Current>
  </Breadcrumbs>
</template>

Clipboard

<script setup>
import { Breadcrumbs } from "@dicehub/phi/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs>
    <Breadcrumbs.Link href="#">Home</Breadcrumbs.Link>
    <Breadcrumbs.Separator />
    <Breadcrumbs.Current>Breadcrumbs</Breadcrumbs.Current>
    <Breadcrumbs.Clipboard text="#" />
  </Breadcrumbs>
</template>

API Reference

PropTypeDefaultDescription
size"sm" | "base""base"Sets the breadcrumb trail size.
PropTypeDefaultDescription
hrefstring-Target URL for a breadcrumb link.
iconComponent-Vue component rendered before the link label.
iconPropsRecord<string, unknown>{}Props forwarded to the link icon component.
PropTypeDefaultDescription
loadingbooleanfalseShows a skeleton placeholder for the current page label.
iconComponent-Vue component rendered before the current label.
iconPropsRecord<string, unknown>{}Props forwarded to the current icon component.

No component-specific props.

PropTypeDefaultDescription
textstring-Text copied by the clipboard action.