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 https://mdbootstrap.com/docs/angular/navigation/navbar/#nav


itay pro answered 4 years ago


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


Grzegorz Bujański staff commented 4 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>

      <!-- 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>
          <li class="nav-item">
              <a class="nav-link waves-light" mdbWavesEffect>Features</a>
          </li>
          <li class="nav-item">
              <a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
          </li>

          <!-- 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>
              </div>
          </li>

      </ul>
      <!-- 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="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" height="35" width="35" class="rounded-circle z-depth-0" alt="avatar image">
          </a>
          <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>
        </div>
        </li>
      </ul>

  </links>
  <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

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 https://mdbootstrap.com/previews/templates/admin-dashboard/html/dashboards/v-1.html


itay pro commented 5 years ago

https://imgur.com/a/0GUolpN


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.

FREE CONSULTATION

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

Status

Answered

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