Breadcrumb

Display

Navigation breadcrumb with separator, icon support, max-items collapse and 3 sizes.

Instalação via CLI

$ npx kikitocn add breadcrumb

Interno:

@/lib/utils

Exemplo de uso

BreadcrumbExample.tsx

import { Breadcrumb } from "@/components/ui/cn/breadcrumb/Breadcrumb";

export function BreadcrumbExample() {
  return (
    <Breadcrumb
      items={[
        { label: "Início", href: "/" },
        { label: "Componentes", href: "/cn" },
        { label: "Breadcrumb" },
      ]}
    />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`items*`	`BreadcrumbItem[]`	—	Lista de itens: { label, href?, onClick?, icon? }
`separator`	`ReactNode`	`'/'`	Separador entre os itens
`maxItems`	`number`	`undefined`	Colapsa itens intermediários com '...' ao exceder
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do texto e ícones

Voltar para Display

Carregando…