Replicate BS5 dropdown behaviour

Wappler General How To
#1

I’m trying to create a rich dropdown/context menu. The BS5 dropdown doesn’t allow you to put whatever you want inside it, like a search bar, checkboxes or repeats. I’m wondering if there is a way of natively building something like the examples below, perhaps there’s already a component for this?

I can position a group with absolute and all that for the basic version of it. But I believe I would need some JS to have it close on document click and target it to the button triggering the menu and so on. But before going down that route, I thought it best to ask if anyone has built something similar using vanilla Wappler?

example with a search bar

Screenshot 2023-08-14 at 7.38.50 PM
Screenshot 2023-08-14 at 7.38.50 PM498×738 84.5 KB

example with notifications

Screenshot 2023-08-14 at 9.18.39 PM
Screenshot 2023-08-14 at 9.18.39 PM1172×1252 172 KB

#2

You can actually put pretty much everything inside a dropdown. For example a text input:

<div class="dropdown">
   <button id="dropdown1" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
    <div class="dropdown-menu" aria-labelledby="dropdown1">
        <div class="px-2 mb-3">
            <input id="text1" name="text1" type="text" class="form-control">
        </div>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
#3

oh interesting @Teodor I didn’t realise since the app structure panel doesn’t allow you to add or drag anything inside the dropdown menu component. Is there a particular reason why we’re not able to add it through the GUI as it were?

edit: oh you know what… I tried to add a flex container inside the dropdown and turn it into a repeat children. I guess the correct way would be to add a repeat children directly inside the dropdown?

#4

Mainly because it’s supposed to be used as a dropdown and we added the most logical elements in the UI.
If you can think of a list of elements that are useful inside it we can add them in the UI.

2 Likes
#5

You can just design whatever you wish in a col and then cut>paste it inside the <div class="dropdown-menu"... element :slight_smile:

1 Like
#6

I can see quite a lot of benefit by adding greater UI based functionality for drop downs to help users build notification systems. With the socket functionality of Wappler you could really build instant, feature rich notification drop downs with repeats and so forth.

#7

I think we can use the UI for almost everything:
Check this:

And adding a repeat or convert an element into repeat is easy

1 Like