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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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