Topic: Navbar notification

itay pro asked 5 years ago

Hi, I'm looking for the documentation for alerts notification from the navbar A bell the red notification number. Clicking it opens dropdown list of notifications Where can I found it. Found this with dropdown link but it is not quite what I am looking for

itay pro answered 3 years ago

Hi, Any updated ? Notification feed is very useful and was there before

Grzegorz Bujański staff commented 3 years ago

Hi, unfortunately no, we still don't have a ready-to-use component. The only solution is to create a dropdown with a badge and an icon + updating the badge notification number and notification list in the dropdown.

itay pro answered 5 years ago

The code that you attached is from the first link I sent I am looking for notifications with badge and styled content, link in the second link I sent

Arkadiusz Idzikowski staff commented 5 years ago

You need to replace element with mdbDropdownToggle directive to the one that match your needs. For now we don't have such example in our documentation but we will consider adding one.

Arkadiusz Idzikowski staff answered 5 years ago

You need to use dropdown code with other element than button as the toggle, for example:

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

  <!-- Navbar brand -->
  <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>

  <!-- Collapsible content -->

      <!-- Links -->
      <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
              <a class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
          <li class="nav-item">
              <a class="nav-link waves-light" mdbWavesEffect>Features</a>
          <li class="nav-item">
              <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>

          <!-- Dropdown -->
          <li class="nav-item dropdown" dropdown>
              <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
              Basic dropdown<span class="caret"></span></a>
              <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
                  <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
                  <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
                  <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
                  <div class="divider dropdown-divider"></div>
                  <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>

      <!-- Links -->

      <ul class="navbar-nav">
        <li class="nav-link waves-light dropdown avatar p-0 avatar-dropdown" mdbDropdown>
          <a mdbDropdownToggle mdbWavesEffect type="button" class="nav-link waves-light" mdbWavesEffect>
            <img src="" height="35" width="35" class="rounded-circle z-depth-0" alt="avatar image">
          <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-primary" role="menu">
            <div class="text-center py-2 px-2">Dropdown item</div>
            <div class="text-center py-2 px-2">Dropdown item</div>
            <div class="divider dropdown-divider"></div>
            <a class="dropdown-item text-center waves-light" mdbWavesEffect>Dropdown item</a>

  <!-- Collapsible content -->


itay pro answered 5 years ago

This is what I was looking for Check the navbar Notification. This is for jQuery. I want the same for Angular

itay pro commented 5 years ago

Damian Gemza staff answered 5 years ago

Dear mdb2,

We haven't got such a ready-to-use component. You have to mix the dropdown with some badge, and service which will get the number of your notifications.

Best Regards, Damian

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.1
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: Yes