Breadcrumb

Trilha de navegação que indica a localização atual dentro de uma hierarquia.

Uso

<script setup lang="ts">
import { Breadcrumb } from '@halfbyte/maka'

const items = [
  { label: 'Início', href: '/' },
  { label: 'Produtos', href: '/produtos' },
  { label: 'Camisetas' },
]
</script>

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

Exemplos

<Breadcrumb :items="[
  { label: 'Início', href: '/' },
  { label: 'Componentes', href: '/guide/components' },
  { label: 'Breadcrumb' },
]" />

<!-- Separador customizado -->
<Breadcrumb separator="›" :items="items" />

Props

Prop	Tipo	Padrão
items	BreadcrumbItem[]	obrigatório
separator	string	"/"

BreadcrumbItem

Campo	Tipo	Descrição
label	string	Texto exibido no item
href	string	Link de navegação (omitir no item atual)

Slots

Slot	Descrição
separator	Separador customizado entre itens
item-{i}	Conteúdo customizado para o item de índice i