JSFiddle - React, Tailwind, and code Playground

by Andrea Ercolino

HTML

<ul id="menu">
  <li class="ui-state-disabled">Orders</li>
  <li class="ui-state-disabled">Invoices</li>
  <li class="ui-state-disabled"><a>PaymentPlans</a></li>
  <li>Customers (3)
      <ul>
        <li><a href="#">Aaa bbb ccc</a></li>
        <li><a href="#">Eee</a></li>
        <li class="oneline"><a href="#">Fff ggg hhh iii jjj kkk lll mmm</a></li>
      </ul>
  </li>
</ul>

CSS

.oneline {
  text-overflow : ellipsis;
  white-space   : nowrap;
  overflow      : hidden;
}
    
.ui-menu {
  max-width: 180px;
}

JavaScript

$( "#menu" ).menu();