Navigation par étapes

Ce composant très courant dans les applications CNAM permet de guider l'utilisateur à travers les différentes étapes d'un processus.

Le composant se place dans la zone de navigation de l'entête de la zone de travail. Il s'étend sur toute la largeur de la zone qu'il occuppe, la taille des étapes s'adaptent selon leur nombre. Il est conseillé de ne pas proposer plus de 5 à 7 étapes.

<ul class="etapes">
  <li class="active"><a href="#">Réception <br>de la demande</a></li>
  <li class="select"><a href="#">Instruction</a></li>
  <li>Validation des droits</li>
  <li>Validation de la demande</li>
  <li>Récapitulatif</li>  
</ul>

Onglets alternatifs

Ce composant d'onglets alternatifs permet d'enrichir les fonctionnalités des onglets en proposant :

  • 2 lignes de libellé pour exprimer des concepts complexes nécessitant un sous titre, afficher un statut ou une information contextuelle.
  • L'ajout optionnel d'un menu de navigation sur l'onglet. Il peut notamment servir de navigation intérieur dans le contenu de l'onglet.
  • La présence de boutons d'actions au niveau de l'entête de page. Cette structure est particulièrement utile lorsque tous les onglets n'ont pas vocation à être modifiés ou lorsque leur contenu est très long.

<body class="has-content-nav-lg">
  ...
  <div role="tabpanel" class="tabpanel-alt">
    <ul role="tablist" class="nav nav-tabs">
      <li role="presentation" class="active">
        <a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab"> 
            <span>ONGLETS 1</span>
            <span class="status">Sous titre de l'onglet</span>
        </a>
      </li> 
      <li role="presentation">
        <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-drop"></button>
        <a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab"> 
        <span>Autre onglet</span>
        <span class="status">Sous titre de l'onglet</span></a>
        <ul role="menu" class="dropdown-menu"> 
          <li role="presentation">
            <a role="menuitem" tabindex="-1" data-target="#infodemande">Sous-menu</a>
          </li>
        </ul>
      </li>
  ...
</body>

Mise en évidence d'onglet

Le framework propose plusieurs badges permettant de mettre en évidence le statut d'un onglet.

<ul class="nav nav-tabs">
  ...
  <li class="has-alert warning" >
    <a href="#" data-toggle="tab">onglet avec alerte</a>
  </li>
</ul>
  <li class="has-alert danger" >...</li>
  <li class="has-alert warning" >...</li>
  <li class="has-alert warning" >...</li>
  <li class="has-alert success" >...</li>
  <li class="has-alert aide" >...</li>
<div role="tabpanel" class="tabpanel-alt">
  <ul class="nav nav-tabs">
    <li class="has-alert danger" >...</li>
    <li class="has-alert warning" >...</li>
    <li class="has-alert info" >...</li>
    <li class="has-alert success" >...</li>
    <li class="has-alert help" >...</li>
  </ul>
</div>