How to set a red dot on the navigation bar for unread message and notification?

Hi,

When an user receives a new message, an icon appears in the conversation list, like this.

I would like to add a red dot on the navigation bar (all screens) to remind the users to check the message inbox. Is there any way to do that? I’ve checked some posts in the community but still don’t know how to do it.

Thank you.

Hi @Vicky,

Assuming you’re using the read status collection, you need to pull-out the count from that collection as a visibility condition into the red dot. You can use the eclipse component to make the red dot and fix it to the bottom (sticky while scrolling) along with the bottom nav bar. (you need to have copy and paste the eclipse into other screens unfortunately but this issue is going to be solved with the coming advanced feature :wink: : We're a couple of weeks away from something big!)

See for an example which @Flawless did here for a top nav bar. : https://youtu.be/cmbYy_8ErtA?si=8pFojvYPr6qUX3h4 (uses the legacy builder which things are different in the responsive builder and I guess he uses @Victor 's solution here : https://youtu.be/26e4ze7HHEM?si=PKZgMLA6mw82E0U_)

There’s a component by NoCode Monkey in the marketplace too which has pre-built this function that you only need to pull-out the count. : 🐒 App Bar with Notifications | NoCode Monkey - #5 by Dilon

Thank you and have a great day!

1 Like