Il y a trois modes possible pour le header :
Il faut bien renseigner la class CSS comme indiquer ci-dessous pour avoir le bon affichage:
.chat__box__header.js-chatNav1.child-2.chat__box__header.js-chatNav1.child-3Concernant les notifications il faut mettre à jour le contenu de la div .chat__counter contenu dans chaque block avatar .chat__avatar.
Pour le menu, on peut gérer l'affichage de la pastille rouge avec la class .has-notification sur l'item .chat__avatar__menu.
Les actions Javascript sont désactivées pour la vue isolée du composant, pour avoir la demo intéractive voir la section : Chat/Scripts.
<div class="chat__box__header js-chatNav1 child-2"><a class="chat__avatar js-tab__trigger is-active" href="#chat__content__1" title="John Doe"><img src="assets/images/avatar-01.png"/><span>John Doe</span></a><a class="chat__avatar js-tab__trigger" href="#chat__content__2" title="Julie Duportier"><img src="assets/images/avatar-02.png"/><span>Julie Duportier</span>
<div class="chat__counter">2</div></a></div>
<div class="chat__box__header js-chatNav1 child-3"><a class="chat__avatar js-tab__trigger is-active" href="#chat__content__1" title="John Doe"><img src="assets/images/avatar-01.png"/><span>John Doe</span></a><a class="chat__avatar js-tab__trigger" href="#chat__content__2" title="Julie Duportier"><img src="assets/images/avatar-02.png"/><span>Julie Duportier</span>
<div class="chat__counter">2</div></a><a class="chat__avatar js-tab__trigger" href="#chat__content__3" title="Avatar avec un nom très très très long"><img src="assets/images/avatar-01.png"/><span>Avatar avec un nom très très très long</span>
<div class="chat__counter">3</div></a></div>
<div class="chat__box__header js-chatNav1 child-3"><a class="chat__avatar js-tab__trigger is-active" href="#chat__content__1" title="John Doe"><img src="assets/images/avatar-01.png"/><span>John Doe</span></a><a class="chat__avatar js-tab__trigger" href="#chat__content__2" title="Julie Duportier"><img src="assets/images/avatar-02.png"/><span>Julie Duportier</span>
<div class="chat__counter">2</div></a><a class="chat__avatar js-tab__trigger" href="#chat__content__3" title="Avatar avec un nom très très très long"><img src="assets/images/avatar-01.png"/><span>Avatar avec un nom très très très long</span>
<div class="chat__counter">3</div></a><a class="chat__avatar__menu js-chatAvatarMenu has-notification" href=""><span class="c-fonticon__icon-arrow-right-double"></span></a></div>