Vinicunca

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">
import type { BreadcrumbItem } from 'pohon-ui'

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

<template>
  <PBreadcrumb :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { BreadcrumbItem } from 'pohon-ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Docs',
    icon: 'i-lucide-book-open',
    to: '/pohon/getting-started'
  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    to: '/pohon/components'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-lucide-link',
    to: '/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
  • ui?: { 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 { BreadcrumbItem } from 'pohon-ui'

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

<template>
  <PBreadcrumb :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { BreadcrumbItem } from 'pohon-ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Docs',
    icon: 'i-lucide-book-open',
    to: '/pohon/getting-started'
  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    to: '/pohon/components'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-lucide-link',
    to: '/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 { BreadcrumbItem } from 'pohon-ui'

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

<template>
  <PBreadcrumb separator-icon="i-lucide-arrow-right" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { BreadcrumbItem } from 'pohon-ui'

const items = ref<BreadcrumbItem[]>([
  {
    label: 'Docs',
    icon: 'i-lucide-book-open',
    to: '/pohon/getting-started'
  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    to: '/pohon/components'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-lucide-link',
    to: '/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 ui.icons.chevronRight key.
You can customize this icon globally in your vite.config.ts under ui.icons.chevronRight key.

Color

Use the color prop to change the color of the active Breadcrumb.

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

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

<template>
  <PBreadcrumb color="secondary" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { BreadcrumbItem } from 'pohon-ui'

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

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

Examples

With separator slot

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

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

const items: Array<BreadcrumbItem> = [
  {
    label: 'Docs',
    to: '/pohon/getting-started',
  },
  {
    label: 'Components',
    to: '/pohon/components',
  },
  {
    label: 'Breadcrumb',
    to: '/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 { BreadcrumbItem } from 'pohon-ui';

const items = [
  {
    label: 'Home',
    to: '/',
  },
  {
    slot: 'dropdown' as const,
    icon: 'i-lucide-ellipsis',
    children: [
      {
        label: 'Documentation',
        to: '/pohon/getting-started',
      },
      {
        label: 'Themes',
      },
      {
        label: 'GitHub',
      },
    ],
  },
  {
    label: 'Components',
    to: '/pohon/components',
  },
  {
    label: 'Breadcrumb',
    to: '/pohon/components/breadcrumb',
  },
] satisfies Array<BreadcrumbItem>;
</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

app.config.ts
export default defineAppConfig({
  ui: {
    breadcrumb: {
      slots: {
        root: 'relative min-w-0',
        list: 'flex items-center gap-1.5',
        item: 'flex min-w-0',
        link: 'group relative flex items-center gap-1.5 text-sm min-w-0 rounded-md',
        linkLeadingIcon: 'shrink-0 size-5',
        linkLeadingAvatar: 'shrink-0',
        linkLeadingAvatarSize: '2xs',
        linkLabel: 'truncate',
        separator: 'flex',
        separatorIcon: 'shrink-0 size-5 color-text-muted'
      },
      variants: {
        active: {
          true: {
            link: 'font-600'
          },
          false: {
            link: 'color-text-muted font-500'
          }
        },
        disabled: {
          true: {
            link: 'cursor-not-allowed opacity-75'
          }
        },
        to: {
          true: ''
        },
        color: {
          primary: {
            link: 'outline-primary/25 focus-visible:outline-3'
          },
          secondary: {
            link: 'outline-secondary/25 focus-visible:outline-3'
          },
          success: {
            link: 'outline-success/25 focus-visible:outline-3'
          },
          info: {
            link: 'outline-info/25 focus-visible:outline-3'
          },
          warning: {
            link: 'outline-warning/25 focus-visible:outline-3'
          },
          error: {
            link: 'outline-error/25 focus-visible:outline-3'
          },
          neutral: {
            link: 'outline-border-inverted/25 focus-visible:outline-3'
          }
        }
      },
      compoundVariants: [
        {
          disabled: false,
          active: false,
          to: true,
          class: {
            link: [
              'hover:color-text',
              'transition-colors'
            ]
          }
        },
        {
          color: 'primary',
          active: true,
          class: {
            link: 'color-primary'
          }
        },
        {
          color: 'neutral',
          active: true,
          class: {
            link: 'color-text-highlighted'
          }
        }
      ],
      defaultVariants: {
        color: 'primary'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        breadcrumb: {
          slots: {
            root: 'relative min-w-0',
            list: 'flex items-center gap-1.5',
            item: 'flex min-w-0',
            link: 'group relative flex items-center gap-1.5 text-sm min-w-0 rounded-md',
            linkLeadingIcon: 'shrink-0 size-5',
            linkLeadingAvatar: 'shrink-0',
            linkLeadingAvatarSize: '2xs',
            linkLabel: 'truncate',
            separator: 'flex',
            separatorIcon: 'shrink-0 size-5 color-text-muted'
          },
          variants: {
            active: {
              true: {
                link: 'font-600'
              },
              false: {
                link: 'color-text-muted font-500'
              }
            },
            disabled: {
              true: {
                link: 'cursor-not-allowed opacity-75'
              }
            },
            to: {
              true: ''
            },
            color: {
              primary: {
                link: 'outline-primary/25 focus-visible:outline-3'
              },
              secondary: {
                link: 'outline-secondary/25 focus-visible:outline-3'
              },
              success: {
                link: 'outline-success/25 focus-visible:outline-3'
              },
              info: {
                link: 'outline-info/25 focus-visible:outline-3'
              },
              warning: {
                link: 'outline-warning/25 focus-visible:outline-3'
              },
              error: {
                link: 'outline-error/25 focus-visible:outline-3'
              },
              neutral: {
                link: 'outline-border-inverted/25 focus-visible:outline-3'
              }
            }
          },
          compoundVariants: [
            {
              disabled: false,
              active: false,
              to: true,
              class: {
                link: [
                  'hover:color-text',
                  'transition-colors'
                ]
              }
            },
            {
              color: 'primary',
              active: true,
              class: {
                link: 'color-primary'
              }
            },
            {
              color: 'neutral',
              active: true,
              class: {
                link: 'color-text-highlighted'
              }
            }
          ],
          defaultVariants: {
            color: 'primary'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

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.