Icons inside SlideBar Menu?

Does anyone know if it is possible to have Icons next to text inside the SlideBar Menu instead of just text. I would like to make the menu more visually pleasing for user experience.

It is not possible with the SideBar Menu that I’m aware of, I ended up making a menu of my own with a reusable element that’s on the header element. It’s a floating group that’s tether to the top left of the screen, I just added buttons with icons next to it like this;

Each button has a group under it that’s not visible when it opens and that group collapses the element size when it’s not visible. When you select a button there are sub categories the user can select;

I learned how to do this thanks to the No Codes youtube channel;

It also works very well on mobile, I think it’s much better looking than the SideBar Menu element.

2 Likes

So is your menu a separate reusable element from the header element then? Do you a menu Icon on the header that toggles the menu element?

Yes that is correct, I have a button hidden behind a logo that toggles the menu on or off

Is the menu part of the header, or is it part the page, triggered by the button in the header?

Just trying figure out how to make it work effectively for use primarily on mobile devices.

I created the menu on it’s own reusable element, that way if I have to make changes to it I don’t worry about messing up the header itself.

This is what my header looks like, the menu itself is the reusable header. The header itself I have set to a floating element set to top left, the Menu itself is a floating group, I just set it inside the header.

This worked exactly the way I wanted it to on mobile.

1 Like

@bcart0v thank you for help, I thought that there was a way to make it work the header, and I don’t know why it didn’t make sense, other than I am rust with my web design skills and this is a different an great way to design and publish web apps.

I was doing some playing around, and found that a group focus does great as well,. The group focus you can have hidden on page load, still have the work flow to show the menu, but when the user clicks on the page other than the menu itself, the menu closes. I like that option with the group just in case the user opened the menu, and changed their mind. It has the function just like most menus on computer programs.

You can also use the new fonction :format as text, on a list. It works well with Bubble’s Slidebar Menu :

See the result :
image

1 Like

@nicolas_dap Thank you for that, I will definitely go back back and explore that setup with the slidebar menu. In case I don’t see it or get it figured out on my own, how did you change the background color of the menu?

in the plugin’s options…

Are pulling from an options set to display your menu options?

Another option is to use emojis

can i please ask where did you get the icons and what is the best way - add them to database?

how to ensure color is right?

thank you!