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

Alan1 Alan4 Alan Alan14

      <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

Dropdown

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

## Badges in Navbar

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

- Collections
- Dropdown
- Navbar