Breadcrumbs

Apresentação

O componente Breadcrumbs é responsável por criar navegação hierárquica que mostra ao usuário sua localização atual dentro da estrutura do site. Ele exibe o caminho de navegação de forma clara e permite retornar facilmente a páginas anteriores.

Quando usar

• Para mostrar a localização atual no site
• Para navegação hierárquica
• Para permitir retorno a páginas anteriores
• Para estruturar navegação de categorias
• Para mostrar caminhos de arquivos
• Para navegação em e-commerce
• Para estruturar documentação
• Para mostrar hierarquia de conteúdo

Forma básica de uso

import { Breadcrumbs, Link, Text } from 'eitri-luminus';

// Breadcrumbs básico
<Breadcrumbs>
  <Breadcrumbs.Item>
    <Text>Início</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>Produtos</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>Eletrônicos</Text>
  </Breadcrumbs.Item>
</Breadcrumbs>

// Breadcrumbs com classes personalizadas
<Breadcrumbs className="text-sm">
  <Breadcrumbs.Item>
    <Text className="hover:text-blue-600">Início</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text className="hover:text-blue-600">Categorias</Link>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text className="text-gray-500">Atual</Text>
  </Breadcrumbs.Item>
</Breadcrumbs>

// Breadcrumbs responsivo
<Breadcrumbs className="text-xs md:text-sm lg:text-base">
  <Breadcrumbs.Item>
    <Text>Início</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>Admin</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>Usuários</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>Editar</Text>
  </Breadcrumbs.Item>
</Breadcrumbs>

// Breadcrumbs com identificador
<Breadcrumbs id="navegacao-principal">
  <Breadcrumbs.Item>
    <Text>Início</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>Blog</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>Artigo</Text>
  </Breadcrumbs.Item>
</Breadcrumbs>

// Breadcrumbs com layout flexível
<Breadcrumbs 
  display="flex"
  alignItems="center"
  gap="2"
>
  <Breadcrumbs.Item>
    <Text>🏠 Início</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>📦 Produtos</Text>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <Text>📱 Smartphones</Text>
  </Breadcrumbs.Item>
</Breadcrumbs>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do breadcrumbs (Items)
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Breadcrumbs.Item

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo do item do breadcrumb
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Breadcrumbs herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'breadcrumbs' para estilização base
• Os itens usam flexbox por padrão com gap de 8px
• Mantém a semântica HTML apropriada com <ul> e <li>
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tamanhos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para navegação hierárquica
• Suporta classes CSS
• Pode ser usado para diferentes tipos de estrutura
• Funciona bem com links e texto
• Facilita a navegação do usuário
• Suporta diferentes tamanhos de conteúdo
• Pode ser combinado com outros componentes
• Ideal para navegação hierárquica
• Suporta classes CSS
• Pode ser usado para diferentes tipos de estrutura
• Funciona bem com links e texto
• Facilita a navegação do usuário