Navigație desktop

Prezentare

Oferă acces direct la categoriile principale ale site-ului, vizibil integral pe ecrane largi.

Când se folosește

• pe ecrane mai late de 48rem, ca navigație principală, întotdeauna vizibilă.

Când nu se folosește

• sub 48rem lățime — e ascunsă automat prin CSS și înlocuită de `mobile-navigation`, nu ambele simultan.

Anatomie

Un `<nav class="sd-primary-navigation">` cu `__list` (flex) și linkuri directe; pagina curentă e marcată prin `aria-current="page"`.

Variante

• implicit — o singură variantă

Stări

• implicit
• pagina curentă (`aria-current="page"`, bordură inferioară colorată)
• :hover
• :focus-visible

Comportament

Fără JavaScript: `<nav>` cu linkuri native, complet funcțională. Ascunderea sub 48rem (`display: none`) e strict CSS — conținutul din `mobile-navigation` conține aceleași linkuri, nu o listă redusă.

Reguli de conținut

• etichetele categoriilor rămân scurte și stabile — schimbarea lor frecventă strică orientarea repetată a utilizatorilor.

Responsabilitățile implementatorului

• lista de linkuri trebuie să rămână identică între `desktop-navigation` și `mobile-navigation` — cele două sunt aceeași navigație, afișată diferit pe breakpoint, nu două navigații separate.

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-primary-navigation" aria-label="Navigație principală — exemplu navigation-desktop-navigation"><ul class="sd-primary-navigation__list"><li><a href="#" aria-current="page">Servicii</a></li><li><a href="#">Contact</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).