Home App Docs Blog Github

Best way to create a menu/bottom menu bar

Hi there,

I’m relatively new to Builder so do excuse me if this is a bit of a dumb question, but what would be the best way to create a menu bar? Right now, I’m just using a symbol I created and it’s working quite well. The only thing I’m missing is a way to let the user know which page they’re on right now, as you can’t highlight a certain section of the menu bar without changing the symbol and changing it everywhere.

Thanks in advance for any advice!

Hey Lena, thanks for reaching out! While we have a variety of Builder templates you can choose from (menu dropdowns and hamburger menus), it sounds like you’ve created a symbol you’re already happy with! If you want to highlight the section of the menu bar when a user clicks on that menu option, the best option would be to head to the data tab and create a click action. Here you can say that “on click” the background color changes, or whatever styling you’re looking to make. Here’s a guide that shows working with the data tab.

Feel free to reach out with any additional questions!

Hi Kara, thanks so much! Just to clarify, would that then also keep it highlighted while you’re on the page. So say if the person clicks on “About” and you get redirected to an /about page - would the “About” in the menu also be highlighted still?

Hey Lena,

This would keep the menu item highlighted while the user is active on the page and switch when navigating to a new page. I just created a more specific post that should help guide you through setting it up: Changing the style of your navigation menu items

Let me know if you have any additional questions!

1 Like

Fantastic! That’s exactly what I needed. Thank you so much for all of your help.