Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Examples

Prop	Default	Type	Description
`items`	`[]`	`array`	An array of `Links` wrapped around the Button component, inheriting all its props and slots with additional `children` prop.

Variant & Color

Prop	Default	Type	Description
`breadcrumb-active`	`text-primary`	`{variant}-{color}`	The active breadcrumb variant and color.
`breadcrumb-inactive`	`text-muted`	`{variant}-{color}`	The inactive breadcrumb variant and color.

You can use any variant and color provided by the Button component. Just use breadcrumb-active and breadcrumb-inactive as prefixes instead of btn.

Preview

Code

Separator

Prop	Default	Type	Description
`separator`	`i-radix-icons-chevron-right`	`string`	The separator icon.

You can adjust the breadcrumb behavior dynamically with the BreadcrumbEllipsis. When there are children in the breadcrumb, the BreadcrumbEllipsis will appear as an icon, and upon clicking it, a DropdownMenu will open, allowing you to navigate to the child elements.

Prop	Default	Type	Description
`ellipsis`	`i-radix-icons-dots-horizontal`	`string`	The ellipsis icon.

Condition	Default	Type	Description
`children`	-	`aray`	An array of children `Links` wrapped around the Button component

For more details, please refer to the Components and Slots sections.

Size

Adjust the breadcrumb size without limits. Use breakpoints (e.g., sm:sm, xs:lg) for responsive sizes or states (e.g., hover:lg, focus:3xl) for state-based sizes.

Prop	Default	Type	Description
`size`	`sm`	`string`	Adjusts the overall size of the breadcrumb component.
`_breadcrumbLink.size`	`sm`	`string`	Customizes the size of each breadcrumb link.
`_breadcrumbSeparator.size`	`sm`	`string`	Modifies the size of the breadcrumb separator.

Preview

Code

Slots

Name	Props	Description
`default`	`item` `index` `isActive`	The breadcrumb item
`separator`	`item`	The separator
`root`	`items`	The root breadcrumb
`list`	`item`	The list of items
`dropdown`	`item`	The dropdown if available ellipsis

Preview

Code

Presets

shortcuts/breadcrumb.ts

type BreadcrumbPrefix = 'breadcrumb'

export const staticBreadcrumb: Record<`${BreadcrumbPrefix}-${string}` | BreadcrumbPrefix, string> = {
  // config
  'breadcrumb': '',
  'breadcrumb-active': 'breadcrumb-active-text-primary',
  'breadcrumb-inactive': 'breadcrumb-inactive-text-muted',
  'breadcrumb-separator-icon': 'i-radix-icons-chevron-right',
  'breadcrumb-ellipsis-icon': 'i-radix-icons-dots-horizontal',

  // components
  'breadcrumb-root': '',
  'breadcrumb-list': 'flex flex-wrap items-center break-words text-muted',
  'breadcrumb-link': 'transition-colors font-normal px-1.5 sm:px-2.5',
  'breadcrumb-item': 'inline-flex items-center gap-1.5',
  'breadcrumb-separator': 'flex',

  // TODO
  'breadcrumb-ellipsis': 'flex items-center justify-center px-1.5 sm:px-2.5 cursor-pointer',
}

export const dynamicBreadcrumb = [
  // states
  [
    /^breadcrumb-active-([^-]+)-([^-]+)$/,
    ([, variant = 'text', color = 'primary']) =>
      `data-[state=active]:btn-${variant}-${color}`,
  ],
  [
    /^breadcrumb-inactive-([^-]+)-([^-]+)$/,
    ([, variant = 'text', color = 'muted']) =>
      `data-[state=inactive]:btn-${variant}-${color}`,
  ],
]

export const breadcrumb = [
  ...dynamicBreadcrumb,
  staticBreadcrumb,
]

Props

types/breadcrumb.ts

import type { HTMLAttributes } from 'vue'
import type { NButtonProps } from './button'

interface BaseExtensions { class?: HTMLAttributes['class'] }

type BreadcrumbListItem = NButtonProps & {
  children?: NButtonProps[]
}

export interface NBreadcrumbProps extends BaseExtensions, Pick<NBreadcrumbLinkProps, 'breadcrumbActive' | 'breadcrumbInactive'> {
  /**
   * List of items to display in the breadcrumb.
   *
   * @example
   * items: [{ label: 'Home', to: '/' }, { label: 'About', to: '/about' }]
   */
  items: Partial<BreadcrumbListItem>[]
  separator?: NBreadcrumbSeparatorProps['icon']
  ellipsis?: NBreadcrumbEllipsisProps['icon']
  /**
   * Allows you to change the size of the input.
   *
   * @default sm
   *
   * @example
   * size="sm" | size="2cm" | size="2rem" | size="2px"
   */
  size?: string

  // maxItems?: number

  // sub-components
  _breadcrumbSeparator?: Partial<NBreadcrumbSeparatorProps>
  _breadcrumbItem?: Partial<NBreadcrumbItemProps>
  _breadcrumbRoot?: Partial<NBreadcrumbRootProps>
  _breadcrumbList?: Partial<NBreadcrumbListProps>
  _breadcrumbLink?: Partial<NBreadcrumbLinkProps>
  _breadcrumbEllipsis?: Partial<NBreadcrumbEllipsisProps>

  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
   */
  una?: NBreadcrumbUnaProps
}

export interface NBreadcrumbRootProps extends BaseExtensions {
  una?: Pick<NBreadcrumbUnaProps, 'breadcrumbRoot'>
}

export interface NBreadcrumbItemProps extends BaseExtensions {
  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
   */
  una?: Pick<NBreadcrumbUnaProps, 'breadcrumbItem'>
}

export interface NBreadcrumbSeparatorProps extends BaseExtensions {
  /**
   * Custom separator icon.
   */
  icon?: string
  /**
   * Allows you to change the size of the input.
   *
   * @default sm
   *
   * @example
   * size="sm" | size="2cm" | size="2rem" | size="2px"
   */
  size?: string
  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
   */
  una?: Pick<NBreadcrumbUnaProps, 'breadcrumbSeparator' | 'breadcrumbSeparatorIcon'>
}

export interface NBreadcrumbListProps extends BaseExtensions {
  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
   */
  una?: Pick<NBreadcrumbUnaProps, 'breadcrumbList'>
}

export interface NBreadcrumbLinkProps extends BaseExtensions, NButtonProps {
  active?: boolean
  breadcrumbActive?: string
  breadcrumbInactive?: string
}

export interface NBreadcrumbEllipsisProps extends BaseExtensions {
  /**
   * Custom separator icon.
   */
  icon?: string
  /**
   *  /**
   * Allows you to change the size of the input.
   *
   * @default sm
   *
   * @example
   * size="sm" | size="2cm" | size="2rem" | size="2px"
   */
  size?: string
  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/breadcrumb.ts
   */
  una?: Pick<NBreadcrumbUnaProps, 'breadcrumbEllipsis' | 'breadcrumbEllipsisIcon'>
}

interface NBreadcrumbUnaProps {
  breadcrumb?: HTMLAttributes['class']
  breadcrumbRoot?: HTMLAttributes['class']
  breadcrumbItem?: HTMLAttributes['class']
  breadcrumbEllipsis?: HTMLAttributes
  breadcrumbEllipsisIcon?: HTMLAttributes['class']
  breadcrumbList?: HTMLAttributes['class']
  breadcrumbSeparator?: HTMLAttributes['class']
  breadcrumbSeparatorIcon?: HTMLAttributes['class']
}

Components

Breadcrumb.vue

BreadcrumbRoot.vue

BreadcrumbList.vue

BreadcrumbLink.vue

BreadcrumbItem.vue

BreadcrumbSeparator.vue

BreadcrumbEllipsis.vue

<script lang="ts" setup>
import type { NBreadcrumbProps } from '../../../types'
import { cn } from '../../../utils'
import DropdownMenu from '../../elements/dropdown-menu/DropdownMenu.vue'
import BreadcrumbEllipsis from './BreadcrumbEllipsis.vue'
import BreadcrumbItem from './BreadcrumbItem.vue'
import BreadcrumbLink from './BreadcrumbLink.vue'
import BreadcrumbList from './BreadcrumbList.vue'
import BreadcrumbRoot from './BreadcrumbRoot.vue'
import BreadcrumbSeparator from './BreadcrumbSeparator.vue'

const props = defineProps<NBreadcrumbProps>()
</script>

<template>
  <BreadcrumbRoot
    :class="cn(
      'breadcrumb',
      props.class,
      props.una?.breadcrumb,
    )"
    :una
    :size
    v-bind="_breadcrumbRoot"
  >
    <slot name="root" :items="items">
      <BreadcrumbList
        :una
        :size
        v-bind="_breadcrumbList"
      >
        <template
          v-for="(item, i) in items"
          :key="i"
        >
          <slot name="list" :item="item">
            <BreadcrumbItem
              :una
              :size
              v-bind="_breadcrumbItem"
            >
              <slot name="item" :item="item">
                <BreadcrumbLink
                  v-if="!item.children?.length"
                  :active="i === items.length - 1"
                  :breadcrumb-active="props.breadcrumbActive"
                  :breadcrumb-inactive="props.breadcrumbInactive"
                  :size
                  v-bind="{
                    ...item,
                    ..._breadcrumbLink,
                  }"
                >
                  <slot :item="item" :index="i" :is-active="i === items.length - 1" />
                </BreadcrumbLink>
                <template v-else>
                  <slot name="dropdown" :item="item">
                    <DropdownMenu
                      :size
                      :modal="false"
                      :items="item.children"
                      :_dropdown-menu-item="{
                        ..._breadcrumbLink,
                      }"
                    >
                      <BreadcrumbEllipsis
                        :size
                        :icon="ellipsis"
                        v-bind="_breadcrumbEllipsis"
                      />
                    </DropdownMenu>
                  </slot>
                </template>
              </slot>
            </BreadcrumbItem>
            <BreadcrumbSeparator
              v-if="i < props.items!.length - 1"
              :icon="props.separator"
              :size
              :una
              v-bind="_breadcrumbSeparator"
            >
              <slot name="separator" />
            </BreadcrumbSeparator>
          </slot>
        </template>
      </BreadcrumbList>
    </slot>
  </BreadcrumbRoot>
</template>

Edit this page on GitHub

Badge

Displays a badge or a component that looks like a badge.

Button

Displays a button or a component that looks like a button.

On This Page

Examples
Presets
Props
Components

Star on GitHub Create Issues Release Notes Become a Sponsor Edit this page on GitHub