# How can I get the notification badge on my app menu?

**URL:** <https://community.fliplet.com/t/how-can-i-get-the-notification-badge-on-my-app-menu/618>\
**Category:** Get Help\
**Tags:** studio\
**Created:** [February 1, 2024, 6:21pm UTC](https://community.fliplet.com/t/how-can-i-get-the-notification-badge-on-my-app-menu/618 "2024-02-01T18:21:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carina](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@Carina](https://community.fliplet.com/u/Carina)\
**Post date:** [February 1, 2024, 6:21pm UTC](https://community.fliplet.com/t/how-can-i-get-the-notification-badge-on-my-app-menu/618/1 "2024-02-01T18:21:11Z")

</div>

Hi!

I am working on an app where I could really use the notification badge on the app menu to alert users that they have new notifications, is there a bit of custom code I can use for this purpose?

My app is currently using the bottom menu style but it would be great to know how I can add this in the different types of app menus.

---

<div class="post-metadata">

**Author:** ![YuliiaKovalenko](https://avatars.discourse-cdn.com/v4/letter/y/d2c977/32.png) [@YuliiaKovalenko](https://community.fliplet.com/u/YuliiaKovalenko)\
**Post date:** [March 5, 2024, 9:56am UTC](https://community.fliplet.com/t/how-can-i-get-the-notification-badge-on-my-app-menu/618/2 "2024-03-05T09:56:34Z")

</div>

There is a code snippet that should be added to the Global JavaScript to add a badge notification to specific menu item

```auto
$('.hamburger, .fl-app-menu ul > li:nth-child(2) > .internal-link').addClass(
  'add-notification-badge'
);

```

Keep in mind, number 2 should be changed to the number of your “Notifications” menu item, e.g. if the “Notifications” is the 10th menu item, number 2 in the code above should be changed to 10, like this:

```auto
$('.hamburger, .fl-app-menu ul > li:nth-child(10) > .internal-link').addClass(
  'add-notification-badge'
);

```

Open menu without notifications:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/15bf16d53fba3cb9458705128d882ca92715f3e4.png)

Code added to the Global JavaScript:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/660b7c09634c29804059163b20772265f140685f.png)

Closed menu with notifications:  
 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/088753b81b630d02650c353d242ed6f5a4711a19.png)

Open menu with notifications:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/3b26043e2a1474ae48eaa0fd60a4d01a2c7f5582.png)

For different menu types, supported by Fliplet, the position of the notification badge might be different and will require some custom CSS to adjust.

---

<div class="post-metadata">

**Author:** ![Carina](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@Carina](https://community.fliplet.com/u/Carina)\
**Post date:** [March 19, 2024, 3:26pm UTC](https://community.fliplet.com/t/how-can-i-get-the-notification-badge-on-my-app-menu/618/3 "2024-03-19T15:26:16Z")

</div>

> [@YuliiaKovalenko](#):
>
> ```auto
> $('.hamburger, .fl-app-menu ul > li:nth-child(2) > .internal-link').addClass(
> 'add-notification-badge'
> );
> 
> ```

I can’t get this to work on a bottom menu style, can you help?

---

<div class="post-metadata">

**Author:** ![YuliiaKovalenko](https://avatars.discourse-cdn.com/v4/letter/y/d2c977/32.png) [@YuliiaKovalenko](https://community.fliplet.com/u/YuliiaKovalenko)\
**Post date:** [March 22, 2024, 11:03am UTC](https://community.fliplet.com/t/how-can-i-get-the-notification-badge-on-my-app-menu/618/4 "2024-03-22T11:03:27Z")

</div>

Bottom menu has different CSS classes, so we need to change the code to this:

> $(‘.hamburger, .fl-bottom-bar-menu-holder ul \> li:nth-child(3) \> .fl-bottom-bar-icon-holder’).addClass(‘add-notification-badge’);

This will work only if your notification menu item is visible in the first row of the bottom menu.  
 ![image](https://europe1.discourse-cdn.com/flex017/uploads/fliplet/original/1X/7b6ca9f1a9193e26baa34ae8655c50b35f1a7131.png)

But in the future, it is planned to improve the menu settings to make it more dynamic and customizable to user needs.