From 29e8ea2a5d649a74d708fb86277db042cf0587f8 Mon Sep 17 00:00:00 2001
From: indaco <github@mircoveltri.me>
Date: Tue, 30 Apr 2024 12:00:57 +0200
Subject: [PATCH] refactor: new gropdown.Item api

---
 _examples/a-h-templ/home.templ          | 29 ++++++++++++++++++---
 _examples/custom-animations/home.templ  | 29 ++++++++++++++++++---
 _examples/custom-button-icon/home.templ | 29 ++++++++++++++++++---
 _examples/go-html-template/demo.templ   | 29 ++++++++++++++++++---
 _examples/icon-only-button/home.templ   | 29 ++++++++++++++++++---
 _examples/positioning/home.templ        | 29 ++++++++++++++++++---
 _examples/theming/home.templ            | 29 ++++++++++++++++++---
 gropdown-button.templ                   | 13 +---------
 gropdown-button_templ.go                | 21 ++++-----------
 gropdown-content-item.templ             | 12 ++++-----
 gropdown-content-item_templ.go          | 12 ++++-----
 types.go                                | 14 ++++++++--
 utils.go                                | 34 +++++++++++++++++++++++++
 13 files changed, 239 insertions(+), 70 deletions(-)

diff --git a/_examples/a-h-templ/home.templ b/_examples/a-h-templ/home.templ
index d33acaa..7bedfa9 100644
--- a/_examples/a-h-templ/home.templ
+++ b/_examples/a-h-templ/home.templ
@@ -47,12 +47,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>
diff --git a/_examples/custom-animations/home.templ b/_examples/custom-animations/home.templ
index 4819f45..fa29390 100644
--- a/_examples/custom-animations/home.templ
+++ b/_examples/custom-animations/home.templ
@@ -60,12 +60,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>
diff --git a/_examples/custom-button-icon/home.templ b/_examples/custom-button-icon/home.templ
index 3cfa1b6..dd8b623 100644
--- a/_examples/custom-button-icon/home.templ
+++ b/_examples/custom-button-icon/home.templ
@@ -51,12 +51,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu", gropdown.Icon(buttonIcon))
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>
diff --git a/_examples/go-html-template/demo.templ b/_examples/go-html-template/demo.templ
index 8697132..6a78363 100644
--- a/_examples/go-html-template/demo.templ
+++ b/_examples/go-html-template/demo.templ
@@ -26,12 +26,33 @@ templ GropdownDemo() {
 	@gropdown.Root("demo") {
 		@gropdown.Button("Menu")
 		@gropdown.Content() {
-			@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-			@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+			@gropdown.Item("Profile",
+				gropdown.ItemOptions{
+					Href: "/profile",
+					Icon: profileIcon,
+				},
+			)
+			@gropdown.Item("Settings",
+				gropdown.ItemOptions{
+					Href: "/settings",
+					Icon: settingsIcon,
+				},
+			)
 			@gropdown.Divider()
-			@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+			@gropdown.Item("GitHub",
+				gropdown.ItemOptions{
+					Href:     "https://github.com",
+					External: true,
+					Icon:     globeIcon,
+				},
+			)
 			@gropdown.Divider()
-			@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+			@gropdown.Item("Button",
+				gropdown.ItemOptions{
+					Icon:  clickIcon,
+					Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+				},
+			)
 		}
 	}
 }
diff --git a/_examples/icon-only-button/home.templ b/_examples/icon-only-button/home.templ
index 4e9dd2f..263a8b3 100644
--- a/_examples/icon-only-button/home.templ
+++ b/_examples/icon-only-button/home.templ
@@ -47,12 +47,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>
diff --git a/_examples/positioning/home.templ b/_examples/positioning/home.templ
index f436881..1df9c47 100644
--- a/_examples/positioning/home.templ
+++ b/_examples/positioning/home.templ
@@ -47,12 +47,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>
diff --git a/_examples/theming/home.templ b/_examples/theming/home.templ
index 0ebe9d7..2a60e9e 100644
--- a/_examples/theming/home.templ
+++ b/_examples/theming/home.templ
@@ -51,12 +51,33 @@ templ HomePage() {
 				@gropdown.Root("demo") {
 					@gropdown.Button("Menu")
 					@gropdown.Content() {
-						@gropdown.Item(gropdown.DropdownItem{Label: "Profile", Href: "/profile", Icon: profileIcon})
-						@gropdown.Item(gropdown.DropdownItem{Label: "Settings", Href: "/settings", Icon: settingsIcon})
+						@gropdown.Item("Profile",
+							gropdown.ItemOptions{
+								Href: "/profile",
+								Icon: profileIcon,
+							},
+						)
+						@gropdown.Item("Settings",
+							gropdown.ItemOptions{
+								Href: "/settings",
+								Icon: settingsIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "GitHub", Href: "https://github.com", External: true, Icon: globeIcon})
+						@gropdown.Item("GitHub",
+							gropdown.ItemOptions{
+								Href:     "https://github.com",
+								External: true,
+								Icon:     globeIcon,
+							},
+						)
 						@gropdown.Divider()
-						@gropdown.Item(gropdown.DropdownItem{Label: "Button", Icon: clickIcon, Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"}})
+						@gropdown.Item("Button",
+							gropdown.ItemOptions{
+								Icon:  clickIcon,
+								Attrs: templ.Attributes{"onclick": "alert('Hello gropdown');"},
+							},
+						)
 					}
 				}
 			</div>
diff --git a/gropdown-button.templ b/gropdown-button.templ
index 367546e..c5e2a53 100644
--- a/gropdown-button.templ
+++ b/gropdown-button.templ
@@ -5,19 +5,8 @@ const defaultButtonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" v
 </svg>
 `
 
-// getIcon If icons are provided, use the first one; otherwise, empty ButtonIcon struct.
-func getIcon(icons []*ButtonIcon) *ButtonIcon {
-	var icon *ButtonIcon
-	if len(icons) > 0 {
-		icon = icons[0]
-	} else {
-		icon = &ButtonIcon{}
-	}
-	return icon
-}
-
 templ Button(label string, icons ...*ButtonIcon) {
-	@renderButton(label, getIcon(icons))
+	@renderButton(label, getButtonIcon(icons))
 }
 
 templ renderButton(label string, icon *ButtonIcon) {
diff --git a/gropdown-button_templ.go b/gropdown-button_templ.go
index 12bbf58..60870c7 100644
--- a/gropdown-button_templ.go
+++ b/gropdown-button_templ.go
@@ -15,17 +15,6 @@ const defaultButtonIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" v
 </svg>
 `
 
-// getIcon If icons are provided, use the first one; otherwise, empty ButtonIcon struct.
-func getIcon(icons []*ButtonIcon) *ButtonIcon {
-	var icon *ButtonIcon
-	if len(icons) > 0 {
-		icon = icons[0]
-	} else {
-		icon = &ButtonIcon{}
-	}
-	return icon
-}
-
 func Button(label string, icons ...*ButtonIcon) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
@@ -39,7 +28,7 @@ func Button(label string, icons ...*ButtonIcon) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = renderButton(label, getIcon(icons)).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = renderButton(label, getButtonIcon(icons)).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -75,7 +64,7 @@ func renderButton(label string, icon *ButtonIcon) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(buttonId(label))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-button.templ`, Line: 25, Col: 22}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-button.templ`, Line: 14, Col: 22}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -101,7 +90,7 @@ func renderButton(label string, icon *ButtonIcon) templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(label)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-button.templ`, Line: 27, Col: 20}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-button.templ`, Line: 16, Col: 20}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -114,7 +103,7 @@ func renderButton(label string, icon *ButtonIcon) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(menuId(label))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-button.templ`, Line: 30, Col: 31}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-button.templ`, Line: 19, Col: 31}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -128,7 +117,7 @@ func renderButton(label string, icon *ButtonIcon) templ.Component {
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(label)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-button.templ`, Line: 33, Col: 10}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `gropdown-button.templ`, Line: 22, Col: 10}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
diff --git a/gropdown-content-item.templ b/gropdown-content-item.templ
index 94bae4c..8b34dc7 100644
--- a/gropdown-content-item.templ
+++ b/gropdown-content-item.templ
@@ -2,17 +2,17 @@ package gropdown
 
 const defaultExternalLinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="0.875em" height="0.875em" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>`
 
-templ Item(item DropdownItem) {
+templ Item(label string, opts ...ItemOptions) {
 	<li role="none">
-		if item.Href != "" {
-			@linkItem(item)
+		if buildItemOptions(label, opts).Href != "" {
+			@linkItem(buildItemOptions(label, opts))
 		} else {
-			@buttonItem(item)
+			@buttonItem(buildItemOptions(label, opts))
 		}
 	</li>
 }
 
-templ linkItem(item DropdownItem) {
+templ linkItem(item *DropdownItem) {
 	<a
 		role="menuitem"
 		class="gdd_content_item"
@@ -35,7 +35,7 @@ templ linkItem(item DropdownItem) {
 	</a>
 }
 
-templ buttonItem(item DropdownItem) {
+templ buttonItem(item *DropdownItem) {
 	<button role="menuitem" class="gdd_content_item" { item.Attrs... }>
 		if item.Icon != "" {
 			<div class="gdd_content_item_icon">
diff --git a/gropdown-content-item_templ.go b/gropdown-content-item_templ.go
index ad4289d..0260c01 100644
--- a/gropdown-content-item_templ.go
+++ b/gropdown-content-item_templ.go
@@ -12,7 +12,7 @@ import "bytes"
 
 const defaultExternalLinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="0.875em" height="0.875em" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>`
 
-func Item(item DropdownItem) templ.Component {
+func Item(label string, opts ...ItemOptions) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -29,13 +29,13 @@ func Item(item DropdownItem) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		if item.Href != "" {
-			templ_7745c5c3_Err = linkItem(item).Render(ctx, templ_7745c5c3_Buffer)
+		if buildItemOptions(label, opts).Href != "" {
+			templ_7745c5c3_Err = linkItem(buildItemOptions(label, opts)).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			templ_7745c5c3_Err = buttonItem(item).Render(ctx, templ_7745c5c3_Buffer)
+			templ_7745c5c3_Err = buttonItem(buildItemOptions(label, opts)).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -51,7 +51,7 @@ func Item(item DropdownItem) templ.Component {
 	})
 }
 
-func linkItem(item DropdownItem) templ.Component {
+func linkItem(item *DropdownItem) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
@@ -135,7 +135,7 @@ func linkItem(item DropdownItem) templ.Component {
 	})
 }
 
-func buttonItem(item DropdownItem) templ.Component {
+func buttonItem(item *DropdownItem) templ.Component {
 	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
 		if !templ_7745c5c3_IsBuffer {
diff --git a/types.go b/types.go
index 3a91f10..cb69f59 100644
--- a/types.go
+++ b/types.go
@@ -13,16 +13,26 @@ func (p Position) String() string {
 type DropdownItem struct {
 	Label    string           // Label is the text displayed for the dropdown item.
 	Icon     string           // Icon is the icon displayed next to the dropdown item.
-	Href     string           // Href is the URL associated with the dropdown item (optional).
-	External bool             // External if the URL associated with the dropdown item is an external URL (optional).
+	Href     string           // Href is the URL associated with the dropdown item.
+	External bool             // External if the URL is an external URL.
 	Attrs    templ.Attributes // Attrs is a map of attributes to be added to the element.
 }
 
+// ItemOptions represents all the options for the dropdown menu item.
+type ItemOptions struct {
+	Icon     string
+	Href     string
+	External bool
+	Attrs    templ.Attributes
+}
+
+// ButtonIcon represents the trigger button for the dropdown menu.
 type ButtonIcon struct {
 	value string
 	size  float32
 }
 
+// Icon constructs a ButtonIcon with the specified value and default size.
 func Icon(v string) *ButtonIcon {
 	return &ButtonIcon{value: v, size: 1.25}
 }
diff --git a/utils.go b/utils.go
index ae858f4..1e103b3 100644
--- a/utils.go
+++ b/utils.go
@@ -33,3 +33,37 @@ func toSlug(s string) string {
 		}
 	}, strings.ToLower(trimmed(s)))
 }
+
+// getButtonIcon If icons are provided, use the first one; otherwise, empty ButtonIcon struct.
+func getButtonIcon(icons []*ButtonIcon) *ButtonIcon {
+	var icon *ButtonIcon
+	if len(icons) > 0 {
+		icon = icons[0]
+	} else {
+		icon = &ButtonIcon{}
+	}
+	return icon
+}
+
+// getItemOptions retrieves the options for a dropdown item, only the first one is considered.
+func getItemOptions(opts []ItemOptions) ItemOptions {
+	var opt ItemOptions
+	if len(opts) > 0 {
+		opt = opts[0]
+	} else {
+		opt = ItemOptions{}
+	}
+	return opt
+}
+
+// buildItemOptions creates a new DropdownItem with the given label and options.
+func buildItemOptions(label string, options []ItemOptions) *DropdownItem {
+	opts := getItemOptions(options)
+	return &DropdownItem{
+		Label:    label,
+		Icon:     opts.Icon,
+		Href:     opts.Href,
+		External: opts.External,
+		Attrs:    opts.Attrs,
+	}
+}