Vue UI

Appearance

breadcrumb ​

ts
export default {
  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 focus-visible:outline-primary',
    linkLeadingIcon: 'shrink-0 size-5',
    linkLeadingAvatar: 'shrink-0',
    linkLeadingAvatarSize: '2xs',
    linkLabel: 'truncate',
    separator: 'flex',
    separatorIcon: 'shrink-0 size-5 text-muted',
  },
  variants: {
    active: {
      true: {
        link: 'text-primary font-semibold',
      },
      false: {
        link: 'text-muted font-medium',
      },
    },
    disabled: {
      true: {
        link: 'cursor-not-allowed opacity-75',
      },
    },
    href: {
      true: '',
    },
  },
  compoundVariants: [
    {
      disabled: false,
      active: false,
      href: true,
      class: {
        link: 'hover:text-default transition-colors',
      },
    },
  ],
}
ts
export default {
  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 focus-visible:outline-primary',
    linkLeadingIcon: 'shrink-0 size-5',
    linkLeadingAvatar: 'shrink-0',
    linkLeadingAvatarSize: '2xs',
    linkLabel: 'truncate',
    separator: 'flex',
    separatorIcon: 'shrink-0 size-5 text-muted',
  },
  variants: {
    active: {
      true: {
        link: 'text-primary font-semibold',
      },
      false: {
        link: 'text-muted font-medium',
      },
    },
    disabled: {
      true: {
        link: 'cursor-not-allowed opacity-75',
      },
    },
    href: {
      true: '',
    },
  },
  compoundVariants: [
    {
      disabled: false,
      active: false,
      href: true,
      class: {
        link: 'hover:text-default transition-colors',
      },
    },
  ],
}