Badges

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

              Copied!
              content_copy
              

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

              
            

Badges in Dropdown

• one1
• two1
• three

<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 data-target="dropdown2" href="#!" class="btn dropdown-trigger">Dropdown<i class="material-icons right">arrow_drop_down</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>

Badges in Collapsibles

• filter_drama

  First

  4

  Lorem ipsum dolor sit amet.

• place

  Second

  1

  Lorem ipsum dolor sit amet.

• textsms

  Third

  4

  Lorem ipsum dolor sit amet.

<ul class="collapsible">
  <li>
    <div class="collapsible-header">
      <i class="material-icons">filter_drama</i>
      <div class="collapsible-header-content">First</div>
      <span class="new badge">4</span></div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">place</i>
      <div class="collapsible-header-content">Second</div>
      <span class="badge">1</span></div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">textsms</i>
      <div class="collapsible-header-content">Third</div>
      <span class="badge new">4</span></div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
</ul>

Options

You can customize captions in many ways.