I can create a drop down menu?

Need help
1

Hi!
I wondered if it was possible to create a drop-down menu in the header as a normal application?
Thanks

2

Yes, but we don’t have such an element (yet). The best way to do it and have an element like ours (see below) is to use a Group with Focus element and have buttons inside it. See this Introduction - Bubble Docs

4 Likes
3

Ok thank you I see better now. But when I want to put a focus group in the header, the header is growing up the size of the group, I wish it opens above my page normally … sorry for my english, i’m french ^^

4

Yeah, our editor doesn’t handle that well, but what you can do is manually change the size in the property editor to something smaller, so that the group doens’t make it bigger. See what we did here: https://bubble.io/page?type=custom&name=header&id=meta_public&tab=tabs-1

1 Like
5

I don’t understand how to make a clickable drop down list…so I put my buttons inside a Focus Group and then I just click the group to see the buttons? Whaaa? Clicking the group doesn’t expand the size of it, or hide it, or show it, or anything…I am hopeful!

6

Have a button that reacts to a click. Then in the workflow for the click, show the focus group.

1 Like
7

Thanks man!

8

Do I put the button inside the focus group, or like on top?

9

The button should be outside the focus group so it would be visible to click on.

10

Inside.

Here’s what the process looks like step-by-step:

  1. Go to the header
  2. Add a focus group
  3. Put your UI elements (buttons etc) inside the group - those are the menu items
  4. Set the group to be invisible
  5. Resize the header by entering the size in the property editor
  6. Show the Group when the button (in the header) is clicked.
7 Likes
11

What if you want to do a hover action?

12

To do a hover action you have to use a group.

In the picture the first condition is when the button is hovered and the second condition is the group itself is hovered. You also need to set the visible on page load to off.

46%20PM
46%20PM1496Ă—950 59.6 KB

1 Like
13

Thanks, that worked!

1 Like
14

@nomads32n There’s also a workaround for showing a groupfocus on hover. The demo in this original post was deleted, but the links below show a similar example :slight_smile:

Editor:

Preview: