Gabarit · Workspace dense

Rail + panneau de navigation

Disponible

Pour les apps à forte densité fonctionnelle : un rail vertical étroit d'icônes (modules de premier niveau) plus un panneau de navigation contextuel (sous-arbre du module sélectionné), puis le contenu principal. Le rail pilote activeItemId ; le panneau se recharge.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular.

Rail + panneau de navigation (données mock)

Suite

Boîte de réception

Aujourd'hui

Demande client — Acmeil y a 2 h
Revue de PR #142il y a 4 h
Onboarding Globexhier

Demande client — Acme

Le rail d'icônes pilote l'activeItemId ; le panneau se recharge selon le module sélectionné. Le contenu correspond à l'élément actif dans le panneau.

Voir le code (Svelte)

<div class="rnp-shell">
  <Header title="Suite" />
  <div class="rnp-body">
    <nav class="rnp-rail" aria-label="Modules">
      <button
        class="rnp-rail-item rnp-rail-item--active"
        type="button"
        aria-label="Boîte"
        aria-pressed="true"
      >
        <span class="rnp-rail-label">Boîte</span>
        <span class="rnp-rail-badge">4</span>
      </button>
      <button
        class="rnp-rail-item"
        type="button"
        aria-label="Projets"
        aria-pressed="false"
      >
        <span class="rnp-rail-label">Projets</span>
      </button>
      <button
        class="rnp-rail-item"
        type="button"
        aria-label="Rapports"
        aria-pressed="false"
      >
        <span class="rnp-rail-label">Rapports</span>
      </button>
    </nav>
    <div class="rnp-panel">
      <h3 class="rnp-panel-title">Boîte de réception</h3>
      <p class="rnp-panel-subtitle">Aujourd'hui</p>
      <ul class="rnp-panel-list" role="list">
        <li class="rnp-panel-item rnp-panel-item--active">
          <span class="rnp-panel-item-title">Demande client — Acme</span>
          <span class="rnp-panel-item-caption">il y a 2 h</span>
        </li>
        <li class="rnp-panel-item">
          <span class="rnp-panel-item-title">Revue de PR #142</span>
          <span class="rnp-panel-item-caption">il y a 4 h</span>
        </li>
        <li class="rnp-panel-item">
          <span class="rnp-panel-item-title">Onboarding Globex</span>
          <span class="rnp-panel-item-caption">hier</span>
        </li>
      </ul>
    </div>
    <main class="rnp-main">
      <h2 class="rnp-main-title">Demande client — Acme</h2>
      <p class="rnp-main-lead">Le rail d'icônes pilote l'activeItemId ; le panneau se recharge selon le module sélectionné. Le contenu correspond à l'élément actif dans le panneau.</p>
    </main>
  </div>
</div>

Composants DS utilisés

Quand l'utiliser

Applications à 3–5 modules distincts (messagerie, projets, analytics…)
Quand chaque module a son propre sous-arbre de navigation
Apps desktop-first à haute densité fonctionnelle (CRM, ERP, suite)