Hi all
How can I add a small red circle in an icon on native navigation menu, showing that the user has messages unread? If anybody knows and share this knowledge with me I will be glad, because I really don’t want to create my own navigation menu.
As far as I know it is not yet possible because the navigation cannot be further edited. For now.
A workaround would be disabling the native navigation and build a custom one. With containers, “open page” logic etc. With that you can enable a whole lot options. I personally still use custom built sidebars for my webapps. I can even animate them, so that it feels more native.
Hi Mihaly,
Thank you for your comment.
I’m struggling to use my own navigation because I’m having a hard time to fix it in the correct position, and I don’t know how it will behave in different models of cellphone. =/
Hmm, I suggest using:
Container (layout: horizontal, “even-space around items”, wrap overflowing content: unchecked)
- smaller containers inside.
Also use smaller icons that would most probably fit even the iphone5s screen. Then set the width and height of the outer containers to fit-content.
You need to build it once on a page and then also add the required logic on the one simple page. After that select the nav external component and just copy paste it to the other pages with the “crtl+c ctrl+v” or “cmd+c cmd+v” commands to the desired location.
After this for the sake of security go through the logic on each page, but if you do not refer to any other component on the page, just use “open page” logic, it should be fine.
Also if you want it to be fixed bottom or top read more on the topic here:
Or watch this tutorial:
1 Like
Hi Mihaly,
I tried that but the position absolute is not working in my app, I have a scroll container and the navigation menu is going to the end of the scroll container, even the navigation is the first in the hierarchy.
I set as position absolute and zero, but it is not working. =/
To make it works I had to check the Stretch to the viewport height, but then stops to work the scroll container.
This is really annoying.
Hello again,
So a deep breath and let’s dive into. The final result is:
I did not integrate any logic for setting the visibility of the notification icons, but that would be a simple set page variable and a few IF statements. If needed, I’ll provide some help with that as well.
Few thoughts before building it. One could solve it with conditional renderer as well, but I wanted to make it as simple as possible. Somehow it looks a tiny bit different on my iphone and in the web (on a device screen size emulation of the Google Chrome dev-tools [F12 key]) and looks correct on an android device. So that is just weird. Another note that it does stick to the bottom of the screen even if the navigation “keys” are enabled on the phone, so it might be a good thought to add some padding to the bottom. But it is just an optimisation issue for different os-es.
Now the step-by-step process:
-
The general “page layout settings”:
-
Place a sticky top bar content (optional): just place it. No settings are required either in “position tab” nor in the style. Everything is optional here.
-
Scroll view, that will hold the content of your page:
That is it, set the width to custom and both to “Grow to…”. -
The content of the navigation bar… This is the tree of the content.
- container
- container
- icon
- icon
- text
- container
-
Settings of the external container:
-
Setting the notification icon… Use the icon “circle”. Use the “tertiary icon” style as you base. Edit it to this:
Now it is small and red, but in the wrong spot. Let’s fix that this way:
Also remember to set the navigation icon to the “primary icon” style or edit as you wish and also the edit the text. On my devices “secondary label” looks nice, but you can test and play around with other settings. Remember to align the text to center. And the width and height should be “fit content”.
- Edit the layout container of the the individual nav-item to provide enough space for the “component tap”. Something like this should do it just fine:
- Add the logic to the individual nav-item containers to open the new pages. That is just drop the flow function to the right container. I suggest naming them, for easy navigation on the TREE.
+1 Finally, how to display the red icon if user has new messages. Well… I do not know how do you identify if they have new messages but when you set any variable at the same spot you could set another app variable (since you need to display the badge on the whole app’s navigation, right?), let’s call it new_message_badge to true. Bing the “notification badge” icon’s visibility property to the appVars.new_message_badge And then it should be updated alongside with your other flows…
You will most probably need to place the navigation on the other pages as well. For this there is the easy copy+paste solution. Really, just first set your navigation to perfectly functional on 1 page then select the container of the navigation press crtl(cmd)+c and go to the next page and press ctrl(cmd)+v. You may need to check the logic if there are some other flow functions not only open page.
Hope this guide helps and solves your issue.
*Final note, this looks just right on IOS and Android, but not in the web. So for a webapp, you need some workarounds, but I assume it is for a mobile app, so will not describe the workarounds here and now.
3 Likes
Hi Mihaly,
Thank for the tutorial, now I could do it… thanks a lot.
1 Like