Breadcrumb

Prezentare

Arată poziția paginii curente în ierarhia site-ului și permite revenirea directă la orice nivel anterior.

Când se folosește

• pe orice pagină aflată la mai mult de un nivel sub pagina principală.

Când nu se folosește

• pe pagina principală sau pe pagini de nivel superior, unde nu există o ierarhie reală de arătat.

Anatomie

Un `<nav class="sd-breadcrumb" aria-label="Breadcrumb">` cu `<ol class="sd-breadcrumb__list">`; fiecare `<li class="sd-breadcrumb__item">` conține un link, cu excepția ultimului, care e un `<span aria-current="page">`. Separatorul „/" e generat prin `::after` pe toate elementele, mai puțin ultimul.

Variante

• implicit — o singură variantă

Stări

• pagina curentă (`aria-current="page"`, fără link)

Comportament

Element static; separatorul „/" e strict decorativ (CSS `content`) — ordinea semantică a listei `<ol>` rămâne corectă și fără el, inclusiv pentru cititoarele de ecran.

Reguli de conținut

• folosește titlurile reale ale paginilor, nu etichete scurtate sau tehnice, ca să rămână recognoscibile.

Cercetare

• https://github.com/ciprian-rus/sistem.digital/pull/50 (site extern)

Istoric

Structura completă a acestei secțiuni urmează șablonul canonic al paginii unei componente. Accesibilitatea (semantică, tastatură, focus) rămâne documentată separat, conform șablonului de accesibilitate.

Preview și markup canonic

Previzualizarea de mai jos redă exact șirul HTML afișat în exemplul de cod. Nu există o implementare paralelă pentru documentație.

Instalare și importuri

pnpm add @sistem-digital/tokens @sistem-digital/components

@import '@sistem-digital/components/navigation.css';

<nav class="sd-breadcrumb" aria-label="Breadcrumb — exemplu navigation-breadcrumb"><ol class="sd-breadcrumb__list"><li class="sd-breadcrumb__item"><a href="#">Acasă</a></li><li class="sd-breadcrumb__item"><span aria-current="page">Cerere</span></li></ol></nav>

Contract și surse

• Documentația familiei Navigație
• Codul sursă (site extern)
• Changelog (site extern)

Schimbarea claselor publice, a markup-ului canonic sau a comportamentului helperelor necesită versionare și instrucțiuni de migrare.

Matricea design–cod

Disponibilitatea reală a acestei componente, calculată din pachetele publicate, conform schemei matricei design–cod. Rândurile Figma, testare cu tastatura și testare cu cititor de ecran rămân „Indisponibil” până la dovezi publicate separat (kit Figma, respectiv auditul manual de accesibilitate).