Navigație locală

Prezentare

Oferă navigare locală între paginile aceleiași secțiuni sau ale aceluiași serviciu, distinctă de navigația globală a site-ului.

Când se folosește

• când o secțiune sau un serviciu are mai multe pagini surori între care persoana ar putea vrea să treacă direct.

Când nu se folosește

• pentru navigația globală a site-ului — aceea rămâne `desktop-navigation`/`mobile-navigation`;
• pentru o secțiune cu o singură pagină, unde o navigație locală nu adaugă nimic.

Anatomie

Un `<nav class="sd-service-navigation">` cu `__title` (titlu vizibil, de exemplu „În această secțiune") și `__list`, ale cărei linkuri au `aria-current="page"` pentru pagina activă.

Variante

• implicit — o singură variantă

Stări

• implicit
• pagina curentă (`aria-current="page"`, fundal și bordură laterală distincte, nu doar culoare de text)

Comportament

Element static, fără JavaScript.

Reguli de conținut

• titlul secțiunii orientează („În această secțiune"), nu doar decorează — omiterea lui lasă lista fără context.

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-service-navigation" aria-label="În această secțiune — exemplu navigation-service-navigation"><h2 class="sd-service-navigation__title">În această secțiune</h2><ul class="sd-service-navigation__list"><li><a href="#" aria-current="page">Prezentare</a></li><li><a href="#">Eligibilitate</a></li></ul></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).