Breadcrumb

Utilize Breadcrumbs para mostrar a localização do utilizador dentro da estrutura hierárquica do site ou aplicação. Este componente é essencial para melhorar a navegabilidade e orientar o utilizador, especialmente em interfaces com múltiplos níveis de navegação.

Características Principais

Navegação Hierárquica

Exibe o caminho percorrido pelo utilizador desde a página inicial até à página atual.

Facilidade de Retorno

Permite que o utilizador volte rapidamente a níveis anteriores de navegação.

Otimização de Espaço

Apresenta a estrutura de navegação de forma compacta e clara.

Exemplo de Utilização

• Websites
• Portais de conteúdo extenso
• Aplicações com navegação complexa

Incorpore Breadcrumbs sempre que desejar proporcionar uma orientação clara sobre a localização atual do utilizador dentro da interface, melhorando a usabilidade e a experiência de navegação.

Nível 1

                                        
<div class="gra-breadcrumb">
    <a href="#" class="graBcLink bc">Link Anterior</a>
    <i class="icon-chevron-right"></i>
    <a href="#" class="graBcNoLink graBcSelected bc">Final</a>
</div>
                                        
                                    

Nível 2

                                        
<div class="gra-breadcrumb">
    <a href="#" class="graBcLink bc">Link Ainda Anterior</a>
    <i class="icon-chevron-right"></i>
    <a href="#" class="graBcLink bc">Link Anterior</a>
    <i class="icon-chevron-right"></i>
    <a href="#" class="graBcNoLink graBcSelected bc">Final</a>
</div>
                                        
                                    

Nível 2 com acessibilidade

                                        
<div class="gra-breadcrumb">
    <a href="#" class="graBcLink bc">Link Ainda Anterior</a>
    <i class="icon-chevron-right"></i>
    <a href="#" class="graBcLink bc">Link Anterior</a>
    <i class="icon-chevron-right"></i>
    <a href="#" class="graBcNoLink graBcSelected bc accessibility">Final</a>
</div>