Breadcrumb

GitHub
A hierarchy of links to navigate through a website.

Usage

Use the Breadcrumb component to show the current page's location in your site's hierarchy.

<script setup lang="ts">
const items = ref([
  {
    label: 'Docs',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon'
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-lucide:link',
    to: '/docs/pohon/components/breadcrumb'
  }
])
</script>

<template>
  <PBreadcrumb :items="items" />
</template>

Items

Use the items prop as an array of objects with the following properties:

  • label?: string
  • icon?: string
  • avatar?: AvatarProps
  • slot?: string
  • class?: any
  • pohon?: { item?: ClassNameValue, link?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLabel?: ClassNameValue, separator?: ClassNameValue, separatorIcon?: ClassNameValue }

You can pass any property from the Link component such as to, target, etc.

<script setup lang="ts">
import type { PBreadcrumbItem } from 'pohon-ui'


const items = ref<PBreadcrumbItem[]>([
  {
    label: 'Docs',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon'
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-lucide:link',
    to: '/docs/pohon/components/breadcrumb'
  }
])
</script>

<template>
  <PBreadcrumb :items="items" />
</template>
A span is rendered instead of a link when the to property is not defined.

Separator Icon

Use the separator-icon prop to customize the Icon between each item. Defaults to i-lucide:chevron-right.

<script setup lang="ts">
import type { PBreadcrumbItem } from 'pohon-ui'


const items = ref<PBreadcrumbItem[]>([
  {
    label: 'Docs',
    icon: 'i-lucide:book-open',
    to: '/docs/pohon'
  },
  {
    label: 'Components',
    icon: 'i-lucide:box',
    to: '/docs/pohon/components'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-lucide:link',
    to: '/docs/pohon/components/breadcrumb'
  }
])
</script>

<template>
  <PBreadcrumb separator-icon="i-lucide:arrow-right" :items="items" />
</template>
You can customize this icon globally in your app.config.ts under pohon.icons.chevronRight key.
You can customize this icon globally in your vite.config.ts under pohon.icons.chevronRight key.

Examples

With separator slot

Use the #separator slot to customize the separator between each item.

<script setup lang="ts">
import type { PBreadcrumbItem } from 'pohon-ui';

const items: Array<PBreadcrumbItem> = [
  {
    label: 'Docs',
    to: '/docs/pohon',
  },
  {
    label: 'Components',
    to: '/docs/pohon/components',
  },
  {
    label: 'Breadcrumb',
    to: '/docs/pohon/components/breadcrumb',
  },
];
</script>

<template>
  <PBreadcrumb :items="items">
    <template #separator>
      <span class="color-text-muted mx-2">/</span>
    </template>
  </PBreadcrumb>
</template>

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

  • #{{ item.slot }}
  • #{{ item.slot }}-leading
  • #{{ item.slot }}-label
  • #{{ item.slot }}-trailing
<script setup lang="ts">
import type { PBreadcrumbItem } from 'pohon-ui';

const items = [
  {
    label: 'Home',
    to: '/',
  },
  {
    slot: 'dropdown' as const,
    icon: 'i-lucide:ellipsis',
    children: [
      {
        label: 'Documentation',
        to: '/docs/pohon',
      },
      {
        label: 'Themes',
      },
      {
        label: 'GitHub',
      },
    ],
  },
  {
    label: 'Components',
    to: '/docs/pohon/components',
  },
  {
    label: 'Breadcrumb',
    to: '/docs/pohon/components/breadcrumb',
  },
] satisfies Array<PBreadcrumbItem>;
</script>

<template>
  <PBreadcrumb :items="items">
    <template #dropdown="{ item }">
      <PDropdownMenu :items="item.children">
        <PButton
          :icon="item.icon"
          color="neutral"
          variant="link"
          class="p-0.5"
        />
      </PDropdownMenu>
    </template>
  </PBreadcrumb>
</template>
You can also use the #item, #item-leading, #item-label and #item-trailing slots to customize all items.

API

Props

Prop Default Type

Slots

Slot Type

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PBreadcrumb. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    breadcrumb: {
      slots: {
        root: '',
        list: '',
        item: '',
        link: '',
        linkLeadingIcon: '',
        linkLeadingAvatar: '',
        linkLeadingAvatarSize: '',
        linkLabel: '',
        separator: '',
        separatorIcon: ''
      },
      variants: {
        active: {
          true: {
            link: ''
          },
          false: {
            link: ''
          }
        },
        disabled: {
          true: {
            link: ''
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: []
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    breadcrumb: {
      slots: {
        root: '',
        list: '',
        item: '',
        link: '',
        linkLeadingIcon: '',
        linkLeadingAvatar: '',
        linkLeadingAvatarSize: '',
        linkLabel: '',
        separator: '',
        separatorIcon: ''
      },
      variants: {
        active: {
          true: {
            link: ''
          },
          false: {
            link: ''
          }
        },
        disabled: {
          true: {
            link: ''
          }
        },
        to: {
          true: ''
        }
      },
      compoundVariants: []
    }
  }
};

Changelog

No recent changes

User

Display user information with name, description and avatar.

CommandPalette

A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.