Dropdown list with badge in materialize css

     Materialize css can easy to display notification message in the left side of the drop down list item, also it is very simple to do using materialize css.

<ul id="ddl" class="dropdown-content">

  <li><a href="#">Value 1<span class="badge">3</span></a></li>

  <li><a href="#">Value 2<span class="badge new">1</span></a></li>

  <li><a href="#">Value 3<span class="badge">8</span></a></li>

  <li><a href="#">Value 4</a></li>

  <li><a href="#">Value 5<span class="badge new">7</span></a></li>

  <li><a href="#">Value 6</a></li>

  <li><a href="#">Value 7<span class="badge new">4</span></a></li>

  <li><a href="#">Value 8<span class="badge">56</span></a></li>

</ul>



<a class="btn dropdown-button" href="#!" data-activates="ddl">

 Please Select

 <i class="mdi-navigation-arrow-drop-down right"></i>

</a>

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement