Badges can notify you that there are new or unread messages or notifications. Add the new class to the badge to give it the background.

Collections

              <div class="collection">
                <a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
                <a href="#!" class="collection-item">Alan<span class="new badge">4</span></a>
                <a href="#!" class="collection-item">Alan</a>
                <a href="#!" class="collection-item">Alan<span class="badge">14</span></a>
              </div>
            

Badges in Dropdown

• one1
• two1
• three

              <ul id="dropdown2" class="dropdown-content">
                <li>one<span class="badge">1</span></a></li>
                <li>two<span class="new badge">1</span></a></li>
                <li>three</a></li>
              </ul>
              <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>          
            

              <nav>
                <div class="nav-wrapper">
                  <a href="" class="brand-logo">Logo</a>
                  ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="">sass</a></li>
                    <li><a href="">sass <span class="new badge">4</span></a></li>
                    <li><a href="">sass</a></li>
                  </ul>
                 </div>
               </nav>