# Breadcrumb

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente de trilha de navegação que constrói automaticamente o caminho hierárquico de páginas a partir das rotas do Angular Router. Exibe o título da rota atual e os itens de navegação como links clicáveis.

## Quando usar

- Indicar ao usuário a posição atual dentro de uma hierarquia de navegação
- Permitir que o usuário navegue rapidamente para níveis anteriores da hierarquia
- Em aplicações com rotas aninhadas de 2 ou mais níveis

## Quando não usar

- Em páginas de primeiro nível sem hierarquia — o breadcrumb teria apenas o item home, sem valor de navegação
- Quando a navegação é linear (wizard/steps) — use um componente de passos em vez de breadcrumb

## Instalação

```typescript
import { BreadcrumbModule } from '@seniorsistemas/angular-components/breadcrumb';

@NgModule({
  imports: [BreadcrumbModule],
})
export class MeuModule {}
```

## Uso básico

```html
<s-breadcrumb></s-breadcrumb>
```

## Configuração de rotas

O breadcrumb lê automaticamente o campo `data.routeTitle` de cada rota. Toda rota com `path` e `component` **deve** ter `routeTitle` definido, caso contrário um erro é lançado.

```typescript
const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: { routeTitle: 'Dashboard' },
    children: [
      {
        path: 'relatorios',
        component: RelatoriosComponent,
        data: { routeTitle: 'Relatórios' },
        children: [
          {
            path: 'vendas',
            component: VendasComponent,
            data: { routeTitle: 'Vendas' },
          },
        ],
      },
    ],
  },
];
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `homeUrl` | `string` | `undefined` | não | URL externa para o ícone home (quando definida, usa `<a>` externo em vez do router) |
| `targetHomeUrl` | `'_self' \| '_blank' \| '_parent' \| '_top'` | `'_self'` | não | Atributo `target` do link home quando `homeUrl` está definido |

### Tipos

```typescript
type BreadcrumbItem = {
  routerLink?: string | string[];
  active?: boolean;
  disabled?: boolean;
  disabledIcon?: boolean;
  hideLabel?: boolean;
  queryParams?: Params;
  url?: string;
  icon?: string;
  target?: string;
  label?: string;
};
```

## Exemplos

### Dois níveis (home + página atual)

```html
<!-- Configuração de rota -->
<!-- { path: 'dashboard', component: DashboardComponent, data: { routeTitle: 'Dashboard' } } -->

<s-breadcrumb></s-breadcrumb>
```

### Com URL de home externa (portal)

```html
<s-breadcrumb homeUrl="https://portal.empresa.com" targetHomeUrl="_blank"></s-breadcrumb>
```

### Quatro níveis de navegação

```typescript
// Configuração das rotas
const routes: Routes = [
  {
    path: 'modulo',
    data: { routeTitle: 'Módulo' },
    children: [
      {
        path: 'secao',
        data: { routeTitle: 'Seção' },
        children: [
          {
            path: 'pagina',
            component: PaginaComponent,
            data: { routeTitle: 'Página' },
          },
        ],
      },
    ],
  },
];
```

```html
<s-breadcrumb></s-breadcrumb>
<!-- Resultado: Home > Módulo > Seção > Página (atual, não clicável) -->
```

## Acessibilidade

- O breadcrumb é renderizado como `<nav>` com `aria-label` adequado
- O item da rota atual é exibido como desabilitado (não clicável), refletindo a posição atual
- O ícone home é acessível via teclado

## Componentes relacionados

- [`Topbar`](../topbar/README.md) — barra superior de navegação onde o breadcrumb costuma ser posicionado