CSS: side-nav-bar ​

.instui-side-nav-bar — Une barre de navigation verticale d'éléments (icône au‑dessus de l'étiquette), avec un mode réduit n'affichant que les icônes.

Définit son propre gap entre les éléments de navigation et son propre padding; le chaînage d'un modificateur utilitaire d'espacement -gap-*/-p-*/-padding-* remplace ces valeurs intégrées. Voir le membre side-nav-bar.item pour les entrées de navigation individuelles.

Source: item.css

Accessibilité ​

Label the <nav> with aria-label so it's announced as a named navigation landmark.

Utilisation ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/side-nav-bar.css";

Exemples ​

html
<nav class="instui-side-nav-bar" aria-label="Primary">
  <a class="item -selected" href="#">
    <span class="instui-icon -icon-house"></span>
    <span class="label">Accueil</span>
  </a>
  <a class="item" href="#">
    <span class="instui-icon -icon-inbox"></span>
    <span class="label">Boîte de réception</span>
  </a>
  <a class="item" href="#">
    <span class="instui-icon -icon-calendar"></span>
    <span class="label">Calendrier</span>
  </a>
  <a class="item" href="#">
    <span class="instui-icon -icon-settings"></span>
    <span class="label">Paramètres</span>
  </a>
</nav>

Structure ​

text
.instui-side-nav-bar
  side-nav-bar.item (component, 1..n)
flowchart TD n0[".instui-side-nav-bar"]:::cssdoc-root n1(["side-nav-bar.item"]):::cssdoc-component n0 -->|1..n| n1 click n1 "/api/css/side-nav-bar.item.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificateurs ​

ModificateurDescription
.-icon-*Afficher une icône glyphe dans chaque élément de navigation.
.-minimizedRéduire pour n'afficher que les icônes (étiquettes cachées). @affects side-nav-bar.item — Masque l'étiquette de l'élément.

Parties ​

PartieDescription
.labelLe libellé textuel de l'élément de navigation.

Tokens consommés ​

TokenTypeValeur
--instui-component-side-nav-bar-background-color<color>LightDarklight-dark(#ffffff, #273540)
--instui-component-side-nav-bar-content-gap<length>0.25rem
--instui-component-side-nav-bar-content-margin<length>0.375rem
--instui-component-side-nav-bar-font-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-side-nav-bar-item-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-side-nav-bar-minimized-width<length>3.75rem

Sous-composants ​