B4A Library ðŸš€ [B4X][B4A] B4XDaisyNavbar: Supercharge Your App Navigation with daisyUI & Tailwind Styling!

Hi Fam

Welcome to the future of B4X UI design! If you've ever wanted the sleek, modern look of Tailwind CSS and daisyUI in your B4X applications, the B4XDaisyNavbar component is here to deliver.
The B4XDaisyNavbar is a versatile, highly customizable navigation bar class that divides your top menu into three distinct sections: a Start slot, a Center slot, and an End slot. This structure perfectly mimics the flexbox layouts found in modern web design.

1771945848909.png
1771945894347.png
1771945932590.png
1771945981753.png



Key Features & Highlights:
• Theming & Variants: Easily apply built-in daisyUI color variants like primary, secondary, accent, neutral, info, success, warning, or error.
• Stunning Special Effects: Turn on a beautiful, translucent "Glass" effect with just a boolean switch (setGlass(True)).
• Shadows & Radii: Utilize Tailwind-inspired shadow scales (from sm to 2xl) and rounded corner styles (sm, md, lg, xl, 2xl, 3xl, or full).
• Interactive Elements Made Easy: The component includes built-in methods to effortlessly add common elements. You can use AddHamburger to place an animated menu icon, AddLogo for branding, AddAvatarToStart or AddAvatarToEnd for user profiles, and AddTitleToCenter to clearly label your current page.
• Complex Layouts, Simple Code: Pin a hamburger menu to the start, drop your app logo in the center, and add an interactive notification bell to the end—all with just a few lines of code.
• Event Handling: The hamburger menu automatically fires Opened and Closed events, allowing you to easily hook it up to a side drawer or custom menu logic.
Quick Example: Here's how easy it is to create an interactive navbar with a hamburger menu, logo, and a notification bell:

B4X: 
Dim nb As B4XDaisyNavbar
nb.Initialize(Me, "nb_int")
Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)

' Add interactive components
nb.AddHamburger(48dip)
nb.AddLogo("wonderperson@192.webp", 40dip, 40dip, "squircle")
nb.AddTitleToStart("B4XDaisy UIKit")

' Add Bell Icon to the end slot
Dim bell As B4XDaisySvgIcon
bell.Initialize(Me, "")
Dim bellView As B4XView = bell.CreateView(24dip, 24dip)
bell.setSvgAsset("bell-solid.svg")
nb.AddViewToEnd(bellView, 24dip, 24dip)



Related Content

[B4X] [B4A] B4XDaisyUIKit - Native Components inspired by DaisyUI & Tailwind

Hi Fam Please note the source of truth for all the working examples for this library will always be the latest demo source code from github/google drive, use that rather as a reference point for your development. The library is still under development and sometimes things change and perhaps...
www.b4x.com www.b4x.com
 
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
A navbar with a button on the right

1781532158408.png


B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb2")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
    nb.Title = "daisyUI"
    
    ' Add a primary solid text button to the end slot using the new API
    Dim btn As B4XDaisyButton = nb.AddButtonToEnd("nb2_menu", "MENU", "primary", 80dip, 36dip, False)

The button click events

B4X: 
Private Sub nb2_menu_Click (Tag As Object)
    toaster.InfoWithDuration("MENU button clicked!", 1500)
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
A navbar with left icon, title and right icon

1781532240733.png


B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb3")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
    
    Dim startIcon As B4XDaisySvgIcon = nb.AddSVGIconToStart("bars", "bars-solid.svg", 24dip, xui.Color_Black)
    
    nb.Title = "Middle Title"
    nb.TitlePosition = "center"
    
    Dim endIcon As B4XDaisySvgIcon = nb.AddSVGIconToEnd("ellipsis", "ellipsis-solid.svg", 24dip, xui.Color_Black)

Click Events

B4X: 
Private Sub bars_Click
    toaster.InfoWithDuration("Start Icon (bars) Clicked!", 1500)
End Sub

Private Sub ellipsis_Click
    toaster.InfoWithDuration("End Icon (ellipsis) Clicked!", 1500)
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
A complex navbar

1781532344318.png


B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_complex")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
    nb.Title = "daisyUI"
    nb.TitlePosition = "center"
    
    Dim complexIcon As B4XDaisySvgIcon = nb.AddSVGIconToStart("complex_bars", "bars-solid.svg", 24dip, xui.Color_Black)
    
    ' End: Avatar
    Dim av As B4XDaisyAvatar = nb.AddAvatarToEnd("avatar", "face_1.jpg", 40dip, "rounded-full")
    
    ' Add Indicator to Avatar
    Dim ind As B4XDaisyIndicator
    ind.Initialize(Me, "")
    ind.CreateView(12dip, 12dip)
    ind.Variant = "success"
    ind.HorizontalPlacement = "start"
    ind.VerticalPlacement = "top"
    ind.AttachToTarget(av.mBase)

Click Events

B4X: 
Private Sub complex_bars_Click
    toaster.InfoWithDuration("Complex Start Icon (bars) Clicked!", 1500)
End Sub

Private Sub avatar_Click
    toaster.InfoWithDuration("Avatar Icon Clicked!", 1500)
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Interactive Bar

1781532484073.png


B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_int")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
    nb.HamburgerVisible = True
    nb.Title = "B4XDaisy UIKit"
   
    ' Set new Logo properties programmatically using idiomatic assignments
    nb.LogoImage = "wonderperson@192.webp"
    nb.LogoWidth = 40
    nb.LogoHeight = 40
    nb.LogoMask = "squircle"
    nb.LogoPosition = "start"
    nb.LogoVisible = True
   
    ' Add Bell Icon to End
    Dim bell As B4XDaisySvgIcon = nb.AddSVGIconToEnd("bell", "bell-solid.svg", 24dip, xui.Color_Black)
   
    ' Add Indicator to Bell
    bellIndicator.Initialize(Me, "")
    bellIndicator.CreateView(24dip, 24dip) ' Initialize internal indicator views
    bellIndicator.Counter = True
    bellIndicator.Text = "97"
    bellIndicator.setCapValue(99)
    bellIndicator.setRounded("rounded-full")
    bellIndicator.Variant = "primary"
    bellIndicator.HorizontalPlacement = "start"
    bellIndicator.AttachToTarget(bell.mBase)

Events

B4X: 
' Event handlers for nb_int
Private Sub nb_int_Opened
    ' Log used for verification in this specific task as requested
    'Log("Navbar Opened")
    toaster.InfoWithDuration("Hamburger: Opened", 1000)
End Sub

Private Sub nb_int_Closed
    'Log("Navbar Closed")
    toaster.InfoWithDuration("Hamburger: Closed", 1000)
End Sub

Private Sub nb_int_LogoClick
    toaster.SuccessWithDuration("Logo Clicked!", 1500)
End Sub

Incrementing the bell indicator

B4X: 
Private Sub bell_Click
    bellIndicator.Increment
    toaster.InfoWithDuration("Bell clicked! Count: " & bellIndicator.getValue & " (displays: " & bellIndicator.Text & ")", 1500)
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Navbar with circle buttons

1781532665822.png


B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_buttons")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
    nb.Title = "daisyUI Buttons"
    
    ' Add ghost circle button to start with green icon color
    Dim btnStart As B4XDaisyButton = nb.AddButtonIconToStart("btn_start", 40dip, "bars-solid.svg", xui.Color_RGB(34, 197, 94), True)
    
    ' Add solid success variant button to end
    Dim btnEnd As B4XDaisyButton = nb.AddButtonIconToEnd("btn_end", 40dip, "save.svg", xui.Color_White, False)
    btnEnd.Variant = "success"

Events

B4X: 
Private Sub btn_start_Click (Tag As Object)
    toaster.InfoWithDuration("Start Ghost Button Clicked!", 1500)
End Sub

Private Sub btn_end_Click (Tag As Object)
    toaster.InfoWithDuration("End Solid Button Clicked!", 1500)
End Sub

1781532755451.png


First Bar

B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_txtbtn_gp")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)

    ' Ghost button on the start (left) side
    Dim btnGhost As B4XDaisyButton = nb.AddButtonToStart("nbtxt_ghost", "Menu", "none", 80dip, 36dip, True)

    ' Solid primary button on the end (right) side
    Dim btnPrimary As B4XDaisyButton = nb.AddButtonToEnd("nbtxt_primary", "Login", "primary", 80dip, 36dip, False)

2nd Bar

B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_txtbtn_sa")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)

    ' Solid secondary on start
    Dim btnSec As B4XDaisyButton = nb.AddButtonToStart("nbtxt_secondary", "Back", "secondary", 80dip, 36dip, False)

    ' Solid accent on end
    Dim btnAccent As B4XDaisyButton = nb.AddButtonToEnd("nbtxt_accent", "Save", "accent", 80dip, 36dip, False)

3rd Bar

B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_txtbtn_swer")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)

    ' Success on start
    Dim btnOk As B4XDaisyButton = nb.AddButtonToStart("nbtxt_success", "OK", "success", 70dip, 36dip, False)

    ' Warning ghost in center
    Dim btnWarn As B4XDaisyButton = nb.AddButtonToCenter("nbtxt_warning", "Warn", "warning", 80dip, 36dip, True)

    ' Error solid on end
    Dim btnErr As B4XDaisyButton = nb.AddButtonToEnd("nbtxt_error", "Delete", "error", 90dip, 36dip, False)

4th Bar

B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_txtbtn_cn")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)

    ' SVG icon on start for visual balance
    Dim startIcon As B4XDaisySvgIcon = nb.AddSVGIconToStart("nbtxt_bars", "bars-solid.svg", 24dip, xui.Color_Black)

    ' Neutral text button centered
    Dim btnNeutral As B4XDaisyButton = nb.AddButtonToCenter("nbtxt_neutral", "Actions", "neutral", 100dip, 36dip, False)

    ' Ghost end button
    Dim btnGhostEnd As B4XDaisyButton = nb.AddButtonToEnd("nbtxt_ghost_end", "Skip", "none", 80dip, 36dip, True)
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Navbar with Back Buttons

1781532998638.png


Back Icon

B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_back_icon")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
    nb.Title = "Page Title"
    nb.TitlePosition = "center"
    nb.BackVisible = True
    nb.BackLabel = ""
    currentY = currentY + 64dip + gap

Event

B4X: 
Private Sub nb_back_icon_Back (Tag As Object)
    toaster.InfoWithDuration("Back (icon only) tapped", 1500)
End Sub

Back Icon with Back Label

B4X: 
Dim nb As B4XDaisyNavbar
    nb.Initialize(Me, "nb_back_text")
    Dim nbView As B4XView = nb.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
    nb.Title = "Detail View"
    nb.TitlePosition = "center"
    nb.BackVisible = True
    nb.BackLabel = "Back"
    currentY = currentY + 64dip + gap

Event

B4X: 
Private Sub nb_back_text_Back (Tag As Object)
    toaster.SuccessWithDuration("Back (with text) tapped", 1500)
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Clearing Slots and Adding New Items

The navbar has 3 slots, start, center and end. These can be cleared and new items added at run-time.

1781534870981.png
1781535275441.png


B4X: 
' =======================================================
' Slot Clear Demo 1: Clear Start Slot
' =======================================================
' Builds a navbar with 3 items in the start slot
' (hamburger button, a bars SVG icon, a ghost text button).
' An external "Clear Start" button removes all of them, then
' adds a fresh "Home" solid primary button to the start slot.
Private Sub AddNavbarClearStartDemo
    nbClearStart.Initialize(Me, "nbcs")
    Dim nbView As B4XView = nbClearStart.AddToParent(pnlContent, 10dip, currentY, Root.Width - 20dip, 64dip)
    nbClearStart.Variant = "neutral"
   
    ' Start slot items that will be cleared
    Dim barsIcon As B4XDaisySvgIcon = nbClearStart.AddSVGIconToStart("nbcs_bars", "bars-solid.svg", 22dip, xui.Color_White)
    Dim menuBtn As B4XDaisyButton = nbClearStart.AddButtonToStart("nbcs_menu", "Menu", "none", 70dip, 34dip, True)
   
    ' Center title for reference
    nbClearStart.AddTitleToEnd("Start Slot Demo")
   
    currentY = currentY + 64dip + gap
   
    ' External "Clear Start" button below the navbar
    Dim btn As B4XDaisyButton
    btn.Initialize(Me, "nbcs_clearBtn")
    btn.AddToParent(pnlContent, 10dip, currentY, 160dip, 40dip)
    btn.Text = "Clear Start Slot"
    btn.Variant = "error"
   
    currentY = currentY + 40dip + gap
End Sub

Private Sub nbcs_clearBtn_Click (Tag As Object)
    ' Clear all items from the start slot and add a new "Home" button
    nbClearStart.ClearStartSlot
    Dim homeBtn As B4XDaisyButton = nbClearStart.AddButtonToStart("nbcs_home", "Home", "primary", 90dip, 36dip, False)
    toaster.SuccessWithDuration("Start slot cleared! Added: Home button", 2000)
End Sub

See the rest of the code on how to clear each slot and adding content to that slot.
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4A Library [B4X][B4A] 🎨 B4XDaisyText: The Ultimate Tailwind & DaisyUI Inspired Text Component! 🚀
Replies
1
Views
536
aeric
aeric
Mashiane
  • Article
B4A Library [B4X][B4A] B4XDaisyCheckbox - Let's create stunning UIs inspired by DaisyUI & TailwindCSS
Replies
0
Views
408
Mashiane
Mashiane
Mashiane
  • Article
B4A Library [B4X][B4A] B4XDaisyList - Modern, Tailwind & DaisyUI Inspired Lists Made Easy! 🚀
Replies
1
Views
929
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation 🚀 [B4X][B4A] B4XDaisyUIKit: Bring Tailwind CSS & DaisyUI Magic to Native Android! 🎨
Replies
1
Views
1K
TILogistic
TILogistic
Mashiane
  • Article
B4A Library [B4X][B4A] 🚀 Create Beautiful UI in B4X: B4XDaisyCard Component Tutorial (Tailwind & DaisyUI Inspired)
Replies
2
Views
1K
Mashiane
Mashiane
Top