B4A Library 🚀 [B4X][B4A] B4XDaisyDropdown Menu: Modern, Customizable & Responsive!

Hey Fam

Another week, a new set of components....

Are you looking to elevate your mobile app interfaces with sleek, modern UI components? Meet the B4XDaisyDropdown class, part of the DaisyUIKit suite for B4A.
Whether you need a classic button dropdown or a modern avatar-based account menu (like a profile/settings menu), this component has you covered. It supports versatile layout features allowing you to snap your menus exactly where you want them relative to your trigger views.

Key Features:

• Flexible Placements & Directions: Choose between top, bottom, left, and right directions, with start, center, and end placements.
• Versatile Triggers: Use standard B4X views as triggers or seamlessly attach the dropdown to an image avatar—perfect for user profiles.
• Full Theming Control: Customize your menu's width, padding, text color, and background color. You can also apply rounded corners (e.g., using Daisy tokens like rounded-box) and adjust shadow depth from none to 2xl.
• Simple Event Handling: Easily capture ItemClick events to trigger actions effortlessly.
• Nested Menus & Badges: You can add submenus, icons, and notification badges natively to your items.

Simple Usage Code Snippet:

Here is a quick example of how you can implement a standard account dropdown:

' 1. Declare the component in Class_Globals
Private ddProfile As B4XDaisyDropdown

' 2. Initialize and setup properties
ddProfile.Initialize(Me, "ddProfile")
ddProfile.Placement = "end"      ' Snaps the right edge of the popup to the trigger [1]
ddProfile.Direction = "bottom"   ' Opens downward [1]
ddProfile.MenuRounded = "theme"  ' Follows Daisy UI rounded themes [1]
ddProfile.MenuShadow = "sm"      ' Applies a small shadow [1]

' 3. Add items and dividers
ddProfile.AddItem("profile", "My Profile")
ddProfile.AddItem("settings", "Settings")
ddProfile.AddDivider             ' Adds a separator line [11]
ddProfile.AddItem("logout", "Logout")

' 4. Handle the Click event
Private Sub ddProfile_ItemClick(Tag As Object, Text As String)
    Log("User selected: " & Text & " (Tag: " & Tag & ")")
    
    Select Case Tag
        Case "profile"
            ' Navigate to profile page
        Case "logout"
            ' Handle user sign out
    End Select
End Sub

With just a few lines of code, you can build visually stunning menus that respond beautifully to user interactions! Check out the attached component and let me know what you build.




Related Content

[B4X] [B4A] B4XDaisy UI Kit - Native Components inspired by DaisyUI & Tailwind

Hi Fam Disclaimer: The [B4A] in the title? This b4xlib has only been tested with B4A, thus the title. I have not checked the cross-platform functionality as its on the roadmap when I finish the complete library. The b4xlib is still in ALPHA stage, things might change, apis might break and...

www.b4x.com