Liens

<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>

Liste de liens

<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>

liste de liens à taille fixe

IL est possible de tronquer les liens sur une seule ligne en ajoutant la classe .list-link-nowrap à la liste

<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.

<ul class="list-link list-link-nowrap">
  <li>
    <a class="nav-item has-icon">
      <span>...</span>
    </a>
  </li>
</ul>