<a class="nav-link" href="#"> <span>...</span> </a> <a class="nav-link" href="#"> <span class="am-icon icon-arrow-right icon-sm"></span> <span>...</span> </a> <a class="nav-link" href="#"> <span class="am-icon icon-arrow-right icon-lg"></span> <span>...</span> </a>
<li> <a class="nav-item"><span>...</span></a> </li> <li> <a class="nav-item strong"><span>...</span></a> </li> <li> <a class="nav-item has-icon"><span>...</span></a> </li> <li> <a class="nav-item"> <span class="icon-sm am-icon icon-star" aria-hidden="true"></span> <span>...</span> </a> </li> <li> <a class="nav-item"> <span class="am-icon icon-apps" aria-hidden="true"></span> <span>...</span> </a> </li> <li> <a class="nav-item"> <span class="icon-lg am-icon icon-calculator" aria-hidden="true"></span> <span>...</span> </a> </li> <li class="nav-item" role="menuitem"> <a class="nav-link" href="#"> <span class="am-icon icon-arrow-right icon-sm"></span> <span>...</span></a> <a class="btn btn-icon" href="#"><span class="am-icon icon-pencil"></span></a> <a class="btn btn-icon" href="#"><span class="am-icon icon-trash"></span></a> </li>
IL est possible de tronquer les liens sur une seule ligne en ajoutant la classe .list-link-nowrap à la liste
.list-link-nowrap
<ul class="list-link list-link-nowrap"> <li> <a class="nav-item has-icon"> <span>...</span> </a> </li> </ul>
Si la liste de lien "nowrap" est incluse dans une grille de mise en page ou tout élement flex qui ne possède pas de taille explicitement définie, il faut ajouter la classe .flex-has-nowrap-items pour éviter que les éléments débordants ne déforme la mise en page.
.flex-has-nowrap-items