Breadcrumb

GitLab
Uma hierarquia de links para navegar por um site.

Uso

Use o componente Breadcrumb para mostrar a localização da página atual na hierarquia do seu site.

<script setup lang="ts">
import type { BreadcrumbItem } from '@nitro/ui'

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

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

<script setup lang="ts">
import { ref } from 'vue'
import type { BreadcrumbItem } from '@nitro/ui'

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

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

Itens

Use a prop items como um array de objetos com as seguintes propriedades:

  • 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 }

Você pode passar qualquer propriedade do componente Link, como to, target, etc.

<script setup lang="ts">
import type { BreadcrumbItem } from '@nitro/ui'

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

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

<script setup lang="ts">
import { ref } from 'vue'
import type { BreadcrumbItem } from '@nitro/ui'

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

<template>
  <NBreadcrumb :items="items" />
</template>
Um span é renderizado em vez de um link quando a propriedade to não é definida.

Ícone de separador

Use a prop separator-icon para personalizar o Icon entre cada item. O padrão é i-lucide-chevron-right.

<script setup lang="ts">
import type { BreadcrumbItem } from '@nitro/ui'

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

<template>
  <NBreadcrumb separator-icon="i-lucide-arrow-right" :items="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { BreadcrumbItem } from '@nitro/ui'

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

<template>
  <NBreadcrumb separator-icon="i-lucide-arrow-right" :items="items" />
</template>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.chevronRight.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.chevronRight.

Cor 4.8+

Use a prop color para alterar a cor do Breadcrumb ativo.

<script setup lang="ts">
import type { BreadcrumbItem } from '@nitro/ui'

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

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

<script setup lang="ts">
import { ref } from 'vue'
import type { BreadcrumbItem } from '@nitro/ui'

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

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

Exemplos

Com slot de separador

Use o slot #separator para personalizar o separador entre cada item.

Com slot personalizado

Use a propriedade slot para personalizar um item específico.

Você terá acesso aos seguintes slots:

  • #{{ item.slot }}
  • #{{ item.slot }}-leading
  • #{{ item.slot }}-label
  • #{{ item.slot }}-trailing
Você também pode usar os slots #item, #item-leading, #item-label e #item-trailing para personalizar todos os itens.

API

Props

Prop Default Type
as'nav'any

The element or component this component should render as.

items T[]
separatorIconappConfig.ui.icons.chevronRightany

The icon to use as a separator.

labelKey'label' keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>

The key used to get the label from the item.

ui { root?: SlotClass; list?: SlotClass; item?: SlotClass; link?: SlotClass; linkLeadingIcon?: SlotClass; linkLeadingAvatar?: SlotClass; linkLeadingAvatarSize?: SlotClass; linkLabel?: SlotClass; separator?: SlotClass; separatorIcon?: SlotClass; }

Slots

Slot Type
item{ item: T; index: number; active?: boolean | undefined; ui: object; }
item-leading{ item: T; index: number; active?: boolean | undefined; ui: object; }
item-label{ item: T; index: number; active?: boolean | undefined; }
item-trailing{ item: T; index: number; active?: boolean | undefined; }
separator{ ui: object; }

Tema

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 text-muted'
      },
      variants: {
        active: {
          true: {
            link: 'font-semibold'
          },
          false: {
            link: 'text-muted font-medium'
          }
        },
        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'
          },
          accent: {
            link: 'outline-accent/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-inverted/25 focus-visible:outline-3'
          }
        }
      },
      compoundVariants: [
        {
          disabled: false,
          active: false,
          to: true,
          class: {
            link: [
              'hover:text-default',
              'transition-colors'
            ]
          }
        },
        {
          color: 'primary',
          active: true,
          class: {
            link: 'text-primary'
          }
        },
        {
          color: 'neutral',
          active: true,
          class: {
            link: 'text-highlighted'
          }
        }
      ],
      defaultVariants: {
        color: 'primary'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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 text-muted'
          },
          variants: {
            active: {
              true: {
                link: 'font-semibold'
              },
              false: {
                link: 'text-muted font-medium'
              }
            },
            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'
              },
              accent: {
                link: 'outline-accent/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-inverted/25 focus-visible:outline-3'
              }
            }
          },
          compoundVariants: [
            {
              disabled: false,
              active: false,
              to: true,
              class: {
                link: [
                  'hover:text-default',
                  'transition-colors'
                ]
              }
            },
            {
              color: 'primary',
              active: true,
              class: {
                link: 'text-primary'
              }
            },
            {
              color: 'neutral',
              active: true,
              class: {
                link: 'text-highlighted'
              }
            }
          ],
          defaultVariants: {
            color: 'primary'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitLab.

Changelog

No recent changes

User

Exiba informações do usuário com nome, descrição e avatar.

CommandPalette

Uma paleta de comandos com busca em texto completo baseada no Fuse.js para correspondência aproximada eficiente.