Material Admin


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.

                                        <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>
Badges in 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>
                                        <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
Badges in Navbar
                                          <div class="nav-wrapper">
                                            <a href="#" class="brand-logo p-l-10">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>
Badges in Collapsibles
  • filter_dramaFirst4

    Lorem ipsum dolor sit amet.

  • placeSecond1

    Lorem ipsum dolor sit amet.

                                        <ul class="collapsible">
                                                <div class="collapsible-header">
                                                <i class="material-icons">filter_drama</i>
                                                <span class="new badge">4</span></div>
                                                <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                                            <div class="collapsible-header">
                                                <i class="material-icons">place</i>
                                                <span class="badge">1</span></div>
                                                <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
Custom Caption

You can explicitly set the caption in a badge using the data-badge-caption attribute.

                                        <span class="new badge" data-badge-caption="custom caption">4</span>
                                        <span class="badge" data-badge-caption="custom caption">4</span>

You can use our color classes to set the background-color of the badge.

                                        <span class="new badge red">4</span>
                                        <span class="new badge blue">4</span>
All Rights Reserved by Materialart. Designed and Developed by WrapPixel.