Breadcrumbs

O componente Breadcrumbs informa os utilizadores sobre a sua localização atual no sistema, permitindo que eles naveguem rapidamente de volta aos níveis superiores. Ele é essencial em sistemas cívicos ou governamentais com grande volume de dados ou estrutura profunda.

Exemplo Interativo

Acessibilidade e Semântica

• Envolto em um elemento HTML nativo <nav> com aria-label="Breadcrumb".
• Utiliza uma lista não ordenada ou ordenada para denotar estrutura hierárquica.
• O último elemento (a página atual) é marcado de forma invisível via aria-current="page", sem links vinculados.
• Transições de cor em elementos clicáveis incluem o anel de foco COBOGÓ azul (Curva & Concreto interatividade).

<script>
  import { Breadcrumbs } from 'cobogo/components/Breadcrumbs';

  const items = [
    { label: 'Cidadão', href: '/cidadao' },
    { label: 'Serviços', href: '/cidadao/servicos' },
    { label: 'Agendamento' }
  ];
</script>

<Breadcrumbs {items} />