Dropdown Menu

Displays a menu to the user, such as a set of actions or functions, triggered by a button.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu") templ DropdownMenuDemo() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Open		}		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-40"}) {			@dropdownmenu.Group() {				@dropdownmenu.Label() {					My Account				}				@dropdownmenu.Item() {					Profile					@dropdownmenu.Shortcut() {						⇧⌘P					}				}				@dropdownmenu.Item() {					Billing					@dropdownmenu.Shortcut() {						⌘B					}				}				@dropdownmenu.Item() {					Settings					@dropdownmenu.Shortcut() {						⌘S					}				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Item() {					Team				}				@dropdownmenu.Sub() {					@dropdownmenu.SubTrigger() {						Invite users					}					@dropdownmenu.SubContent() {						@dropdownmenu.Item() {							Email						}						@dropdownmenu.Item() {							Message						}						@dropdownmenu.Separator()						@dropdownmenu.Item() {							More...						}					}				}				@dropdownmenu.Item() {					New Team					@dropdownmenu.Shortcut() {						⌘+T					}				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Item() {					GitHub				}				@dropdownmenu.Item() {					Support				}				@dropdownmenu.Item(dropdownmenu.ItemProps{Disabled: true}) {					API				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Item() {					Log out					@dropdownmenu.Shortcut() {						⇧⌘Q					}				}			}		}	}}

Installation

shadcn-templ add dropdown-menu

Copy and paste the following code into your project.

components/dropdownmenu/dropdownmenu.templ

package dropdownmenu import (	"context"	"strconv" 	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/utils") type ItemVariant string const (	ItemVariantDefault     ItemVariant = "default"	ItemVariantDestructive ItemVariant = "destructive") type Side string const (	SideTop    Side = "top"	SideRight  Side = "right"	SideBottom Side = "bottom"	SideLeft   Side = "left") type Align string const (	AlignStart  Align = "start"	AlignCenter Align = "center"	AlignEnd    Align = "end") type ctxKey string const idKey ctxKey = "dropdownmenuID" // menuID returns the id shared by Root, Trigger and Content via ctx.func menuID(ctx context.Context) string {	if id, ok := ctx.Value(idKey).(string); ok {		return id	}	return ""} // Trigger returns the attributes that turn any element (usually a button)// into the menu trigger — the asChild equivalent: no wrapper element, so the// trigger composes cleanly inside ButtonGroup and friends.func Trigger(ctx context.Context) templ.Attributes {	return templ.Attributes{		"data-tui-dropdownmenu-trigger": true,		"aria-controls":                 menuID(ctx),		"aria-haspopup":                 "menu",		"aria-expanded":                 "false",	}} type Props struct {	ID string} type ContentProps struct {	Class      string	Attributes templ.Attributes	// Side of the trigger the menu opens on. Defaults to bottom; flips	// automatically when there is no room.	Side Side	// Align along the trigger edge. Defaults to start.	Align Align	// SideOffset is the gap to the trigger in px. Defaults to 4.	SideOffset int	// AlignOffset shifts the menu along the aligned edge in px. Defaults to 0.	AlignOffset int} type GroupProps struct {	ID         string	Class      string	Attributes templ.Attributes} type LabelProps struct {	ID         string	Class      string	Attributes templ.Attributes	Inset      bool} type ItemProps struct {	ID           string	Class        string	Attributes   templ.Attributes	Variant      ItemVariant	Disabled     bool	Inset        bool	Href         string	Target       string	DisableCloseOnClick bool} type CheckboxItemProps struct {	ID         string	Class      string	Attributes templ.Attributes	Checked    bool	Disabled   bool} type RadioGroupProps struct {	ID         string	Class      string	Attributes templ.Attributes} type RadioItemProps struct {	ID         string	Class      string	Attributes templ.Attributes	Value      string	Checked    bool	Disabled   bool} type SeparatorProps struct {	ID         string	Class      string	Attributes templ.Attributes} type ShortcutProps struct {	ID         string	Class      string	Attributes templ.Attributes} type SubProps struct {	ID         string	Class      string	Attributes templ.Attributes} type SubTriggerProps struct {	ID         string	Class      string	Attributes templ.Attributes	Inset      bool} type SubContentProps struct {	ID         string	Class      string	Attributes templ.Attributes} // Items highlight via real focus (Base UI menus move focus to the item under// the pointer and with the arrow keys), so there are no hover: styles here.// 1:1 base/ui/dropdown-menu.tsx DropdownMenuItem, the look comes from// cn-dropdown-menu-item; the inset padding keys on the data-inset attribute.func itemClasses(disabled bool) string {	return utils.CN(		"cn-dropdown-menu-item group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",		// Native <a>/<button> wiring instead of Base UI's div items.		"w-full text-left",		map[string]bool{"pointer-events-none opacity-50": disabled},	)} // 1:1 base/ui/dropdown-menu.tsx DropdownMenuCheckboxItem/RadioItem, cnClass is// cn-dropdown-menu-checkbox-item or cn-dropdown-menu-radio-item.func checkItemClasses(cnClass string, disabled bool) string {	return utils.CN(		cnClass+" relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",		// Native <button> wiring: Base UI unmounts the indicator when unchecked,		// our indicator toggles on the checked state via the group instead.		"group/dmitem w-full text-left",		map[string]bool{"pointer-events-none opacity-50": disabled},	)} // Root renders no element: it only generates the id that links Trigger and// Content (via ctx), so the trigger stays a direct child of its layout.templ DropdownMenu(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	{{ ctx = context.WithValue(ctx, idKey, p.ID) }}	{ children... }} // PortalProps is the reference Portal's surface: the portal node renders// no visible element of its own.type PortalProps struct {	Attributes templ.Attributes} // Portal is 1:1 the reference Portal slot: inert until the script portals// the content to <body> at init.templ Portal(props ...PortalProps) {	{{ var p PortalProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<template data-tui-dropdownmenu-portal { p.Attributes... }>		{ children... }	</template>} templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Side == "" {		{{ p.Side = SideBottom }}	}	if p.Align == "" {		{{ p.Align = AlignStart }}	}	if p.SideOffset == 0 {		{{ p.SideOffset = 4 }}	}	// Inert until the script portals it to <body> at init, so the SSRd	// content never participates in layout or sibling CSS.	@Portal() {	<div		id={ menuID(ctx) }		data-tui-dropdownmenu-content		data-tui-dropdownmenu-side={ string(p.Side) }		data-tui-dropdownmenu-align={ string(p.Align) }		data-tui-dropdownmenu-side-offset={ strconv.Itoa(p.SideOffset) }		data-tui-dropdownmenu-align-offset={ strconv.Itoa(p.AlignOffset) }		data-state="closed"		popover="manual"		class="pointer-events-none isolate fixed inset-auto z-50 m-0 overflow-visible border-0 bg-transparent p-0"	>		<div			data-slot="dropdown-menu-content"			data-tui-dropdownmenu-popup			data-state="closed"			role="menu"			tabindex="-1"			class={				utils.CN(					// 1:1 base/ui/dropdown-menu.tsx DropdownMenuContent, the look comes					// from cn-dropdown-menu-content (animations key on our data-state					// attribute). The --available-height/--anchor-width/--transform-origin					// variables become our JS variable names.					"cn-dropdown-menu-content cn-dropdown-menu-content-logical cn-menu-target cn-menu-translucent z-50 max-h-(--tui-dropdownmenu-available-height) w-(--tui-dropdownmenu-anchor-width) origin-(--tui-dropdownmenu-transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",					// JS wiring: the positioner wrapper is pointer-events-none, and the					// popup stays mounted after animate-out until hidePopover runs.					"pointer-events-auto relative isolate data-closed:fill-mode-forwards",					p.Class,				),			}			{ p.Attributes... }		>			{ children... }		</div>	</div>	}} templ Group(props ...GroupProps) {	{{ var p GroupProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		role="group"		data-slot="dropdown-menu-group"		class={ utils.CN("", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Label(props ...LabelProps) {	{{ var p LabelProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="dropdown-menu-label"		data-inset?={ p.Inset }		class={ utils.CN("cn-dropdown-menu-label", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Item(props ...ItemProps) {	{{ var p ItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Variant == "" {		{{ p.Variant = ItemVariantDefault }}	}	if p.Href != "" {		<a			if p.ID != "" {				id={ p.ID }			}			href={ templ.SafeURL(p.Href) }			if p.Target != "" {				target={ p.Target }			}			data-slot="dropdown-menu-item"			data-variant={ string(p.Variant) }			data-inset?={ p.Inset }			data-tui-dropdownmenu-item			if p.DisableCloseOnClick {				data-tui-dropdownmenu-disable-close-on-click="true"			}			if p.Disabled {				aria-disabled="true"			}			role="menuitem"			class={ utils.CN(itemClasses(p.Disabled), p.Class) }			{ p.Attributes... }		>			{ children... }		</a>	} else {		<button			if p.ID != "" {				id={ p.ID }			}			type="button"			data-slot="dropdown-menu-item"			data-variant={ string(p.Variant) }			data-inset?={ p.Inset }			data-tui-dropdownmenu-item			if p.DisableCloseOnClick {				data-tui-dropdownmenu-disable-close-on-click="true"			}			disabled?={ p.Disabled }			role="menuitem"			class={ utils.CN(itemClasses(p.Disabled), p.Class) }			{ p.Attributes... }		>			{ children... }		</button>	}} templ CheckboxItem(props ...CheckboxItemProps) {	{{ var p CheckboxItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<button		if p.ID != "" {			id={ p.ID }		}		type="button"		data-slot="dropdown-menu-checkbox-item"		data-tui-dropdownmenu-checkbox-item		role="menuitemcheckbox"		if p.Checked {			data-state="checked"			aria-checked="true"		} else {			data-state="unchecked"			aria-checked="false"		}		disabled?={ p.Disabled }		class={ utils.CN(checkItemClasses("cn-dropdown-menu-checkbox-item", p.Disabled), p.Class) }		{ p.Attributes... }	>		<span			data-slot="dropdown-menu-checkbox-item-indicator"			class="cn-dropdown-menu-item-indicator pointer-events-none opacity-0 group-data-[state=checked]/dmitem:opacity-100"		>			@icon.Check()		</span>		{ children... }	</button>} templ RadioGroup(props ...RadioGroupProps) {	{{ var p RadioGroupProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		role="group"		data-slot="dropdown-menu-radio-group"		data-tui-dropdownmenu-radio-group		class={ utils.CN("", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ RadioItem(props ...RadioItemProps) {	{{ var p RadioItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<button		if p.ID != "" {			id={ p.ID }		}		type="button"		data-slot="dropdown-menu-radio-item"		data-tui-dropdownmenu-radio-item		if p.Value != "" {			data-tui-dropdownmenu-radio-value={ p.Value }		}		role="menuitemradio"		if p.Checked {			data-state="checked"			aria-checked="true"		} else {			data-state="unchecked"			aria-checked="false"		}		disabled?={ p.Disabled }		class={ utils.CN(checkItemClasses("cn-dropdown-menu-radio-item", p.Disabled), p.Class) }		{ p.Attributes... }	>		<span			data-slot="dropdown-menu-radio-item-indicator"			class="cn-dropdown-menu-item-indicator pointer-events-none opacity-0 group-data-[state=checked]/dmitem:opacity-100"		>			@icon.Check()		</span>		{ children... }	</button>} templ Separator(props ...SeparatorProps) {	{{ var p SeparatorProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		role="separator"		data-slot="dropdown-menu-separator"		class={ utils.CN("cn-dropdown-menu-separator", p.Class) }		{ p.Attributes... }	></div>} templ Shortcut(props ...ShortcutProps) {	{{ var p ShortcutProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<span		if p.ID != "" {			id={ p.ID }		}		data-slot="dropdown-menu-shortcut"		class={ utils.CN("cn-dropdown-menu-shortcut", p.Class) }		{ p.Attributes... }	>		{ children... }	</span>} templ Sub(props ...SubProps) {	{{ var p SubProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="dropdown-menu-sub"		data-tui-dropdownmenu-sub		class={ utils.CN("", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ SubTrigger(props ...SubTriggerProps) {	{{ var p SubTriggerProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<button		if p.ID != "" {			id={ p.ID }		}		type="button"		data-slot="dropdown-menu-sub-trigger"		data-inset?={ p.Inset }		data-tui-dropdownmenu-sub-trigger		data-state="closed"		role="menuitem"		aria-haspopup="menu"		class={			utils.CN(				// 1:1 base/ui/dropdown-menu.tsx DropdownMenuSubTrigger, the look comes				// from cn-dropdown-menu-sub-trigger. Base UI keys the open highlight on				// data-popup-open, our JS sets data-state=open, which the data-open				// variants inside the cn class match as well.				"cn-dropdown-menu-sub-trigger flex cursor-default items-center outline-hidden select-none data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",				// Native <button> wiring instead of Base UI's div items.				"w-full text-left",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }		@icon.ChevronRight(icon.Props{Class: "cn-rtl-flip ml-auto"})	</button>} templ SubContent(props ...SubContentProps) {	{{ var p SubContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="dropdown-menu-sub-content"		data-tui-dropdownmenu-sub-content		data-state="closed"		role="menu"		tabindex="-1"		class={			utils.CN(				// 1:1 base/ui/dropdown-menu.tsx DropdownMenuSubContent: the sub content				// is the content plus cn-dropdown-menu-sub-content and w-auto, the look				// comes from the cn classes (animations key on our data-state attribute).				"cn-dropdown-menu-content cn-dropdown-menu-content-logical cn-menu-target cn-menu-translucent cn-dropdown-menu-sub-content z-50 w-auto origin-(--tui-dropdownmenu-transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",				// JS wiring: floatingui positions the sub content as a fixed layer and				// toggles the hidden class around the exit animation.				"hidden fixed inset-auto left-0 top-0 data-closed:fill-mode-forwards",				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>}

components/dropdownmenu/dropdownmenu.js

// Uses window.FloatingUIDOM from components/floatingui (loaded in the same bundle).(function () {  const EXIT_MS = 120; // exit animation (duration-100) + slack  const COLLISION_PADDING = 8;  // Submenu hover intent, like Base UI: open fast, close with a grace delay so  // moving the mouse diagonally into the submenu does not flicker.  const SUB_OPEN_DELAY = 100;  const SUB_CLOSE_DELAY = 300;   function allContents() {    return document.querySelectorAll("[data-tui-dropdownmenu-content]");  }   function triggerFor(content) {    return document.querySelector(      '[data-tui-dropdownmenu-trigger][aria-controls="' + content.id + '"]',    );  }   function contentFor(trigger) {    return document.getElementById(trigger.getAttribute("aria-controls"));  }   function popupFor(content) {    return content.querySelector("[data-tui-dropdownmenu-popup]");  }   function setState(content, state) {    content.setAttribute("data-state", state);    const popup = popupFor(content);    if (popup) popup.setAttribute("data-state", state);  }   function setSide(content, side) {    content.setAttribute("data-side", side);    const popup = popupFor(content);    if (popup) popup.setAttribute("data-side", side);  }   // Base UI zooms the popup out of the anchor's center point (e.g.  // "96px -4px"), not out of a placement corner.  function anchorOrigin(result, anchorRect, sideOffset) {    const side = result.placement.split("-")[0];    const centerX = anchorRect.left + anchorRect.width / 2 - result.x + "px";    const centerY = anchorRect.top + anchorRect.height / 2 - result.y + "px";    if (side === "bottom") return centerX + " " + -sideOffset + "px";    if (side === "top") return centerX + " calc(100% + " + sideOffset + "px)";    if (side === "right") return -sideOffset + "px " + centerY;    return "calc(100% + " + sideOffset + "px) " + centerY;  }   // Moves the content to <body> (shadcn portals it the same way). Also removes  // contents whose trigger is gone (leftovers from swapped-out pages).  function portal(content) {    document.querySelectorAll("body > [data-tui-dropdownmenu-content]").forEach((c) => {      if (c !== content && !triggerFor(c)) c.remove();    });    if (content.parentElement !== document.body) {      document.body.appendChild(content);    }  }   function positionMenu(content, trigger) {    const { computePosition, offset, flip, shift, size } = window.FloatingUIDOM;    const side = content.getAttribute("data-tui-dropdownmenu-side") || "bottom";    const align = content.getAttribute("data-tui-dropdownmenu-align") || "start";    const sideOffset =      parseInt(content.getAttribute("data-tui-dropdownmenu-side-offset"), 10) || 4;    const alignOffset =      parseInt(content.getAttribute("data-tui-dropdownmenu-align-offset"), 10) || 0;    const placement = align === "center" ? side : side + "-" + align;     return computePosition(trigger, content, {      placement: placement,      strategy: "fixed",      middleware: [        offset({ mainAxis: sideOffset, alignmentAxis: alignOffset }),        flip({ padding: COLLISION_PADDING }),        shift({ padding: COLLISION_PADDING }),        size({          padding: COLLISION_PADDING,          apply(args) {            content.style.setProperty(              "--tui-dropdownmenu-available-height",              args.availableHeight + "px",            );            content.style.setProperty(              "--tui-dropdownmenu-anchor-width",              args.rects.reference.width + "px",            );          },        }),      ],    }).then((result) => {      content.style.left = result.x + "px";      content.style.top = result.y + "px";      setSide(content, result.placement.split("-")[0]);      const popup = popupFor(content);      if (popup) {        popup.style.setProperty(          "--tui-dropdownmenu-transform-origin",          anchorOrigin(result, trigger.getBoundingClientRect(), sideOffset),        );      }    });  }   // ----- focus highlighting (Base UI moves real focus to menu items) --------   const ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';   // The menu container the keyboard navigates in: the deepest open submenu  // holding focus, otherwise the root popup.  function containerOf(el) {    return el.closest("[data-tui-dropdownmenu-sub-content], [data-tui-dropdownmenu-popup]");  }   function itemsIn(container) {    return [...container.querySelectorAll(ITEM_SELECTOR)].filter(      (item) =>        containerOf(item) === container &&        !item.disabled &&        item.getAttribute("aria-disabled") !== "true",    );  }   function focusItem(item) {    if (item && document.activeElement !== item) item.focus({ preventScroll: false });  }   function moveFocus(container, delta) {    const items = itemsIn(container);    if (!items.length) return;    const index = items.indexOf(document.activeElement);    if (index === -1) {      focusItem(delta > 0 ? items[0] : items[items.length - 1]);      return;    }    const next = items[index + delta];    if (next) focusItem(next);  }   // ----- open / close --------------------------------------------------------   // Base UI menus are modal: the background scroll is locked while open,  // with the body padded by the scrollbar width so the page does not shift.  function lockScroll() {    if (document.body.hasAttribute("data-tui-scroll-locked")) return;    const scrollbar = window.innerWidth - document.documentElement.clientWidth;    document.body.setAttribute("data-tui-scroll-locked", "");    document.body.style.overflow = "hidden";    if (scrollbar > 0) document.body.style.paddingRight = scrollbar + "px";  }   function unlockScroll() {    if (anyOpen()) return;    document.body.removeAttribute("data-tui-scroll-locked");    document.body.style.overflow = "";    document.body.style.paddingRight = "";  }   function open(content, trigger, focusFirst) {    allContents().forEach((c) => {      if (c !== content) close(c);    });    clearTimeout(content._tuiHide);    portal(content);    lockScroll();    if (!content.matches(":popover-open")) {      content.showPopover(); // native top layer    }     // Position it invisibly first, then play the enter animation in place.    content.style.visibility = "hidden";    const finish = () => {      content.style.visibility = "";      if (!content.matches(":popover-open")) return;      setState(content, "open");      trigger.setAttribute("aria-expanded", "true");      const popup = popupFor(content);      if (!popup) return;      if (focusFirst) {        focusItem(itemsIn(popup)[0] || popup);      } else {        popup.focus({ preventScroll: true });      }    };    positionMenu(content, trigger).then(finish, finish);  }   function close(content, refocusTrigger) {    if (!content.matches(":popover-open")) return;    setState(content, "closed");    content.querySelectorAll("[data-tui-dropdownmenu-sub]").forEach(closeSubNow);    const trigger = triggerFor(content);    if (trigger) {      trigger.setAttribute("aria-expanded", "false");      if (refocusTrigger) trigger.focus({ preventScroll: true });    }    clearTimeout(content._tuiHide);    content._tuiHide = setTimeout(() => {      if (content.getAttribute("data-state") === "closed" && content.matches(":popover-open")) {        content.hidePopover();      }    }, EXIT_MS);    unlockScroll();  }   function closeAll(refocusTrigger) {    allContents().forEach((content) => close(content, refocusTrigger));  }   function anyOpen() {    return [...allContents()].find((c) => c.getAttribute("data-state") === "open") || null;  }   // ----- submenus -------------------------------------------------------------   function subParts(sub) {    return {      trigger: sub.querySelector("[data-tui-dropdownmenu-sub-trigger]"),      content: sub.querySelector("[data-tui-dropdownmenu-sub-content]"),    };  }   function openSub(sub, focusFirst) {    const { trigger, content } = subParts(sub);    if (!trigger || !content) return;    content.classList.remove("hidden");    content.style.visibility = "hidden";     const { computePosition, offset, flip, shift } = window.FloatingUIDOM;    // Base UI submenu placement: right-start, sideOffset 0, alignOffset -3.    computePosition(trigger, content, {      placement: "right-start",      strategy: "fixed",      middleware: [        offset({ mainAxis: 0, alignmentAxis: -3 }),        flip({ padding: COLLISION_PADDING }),        shift({ padding: COLLISION_PADDING }),      ],    }).then((result) => {      if (content.classList.contains("hidden")) return; // closed meanwhile      content.style.transition = "none";      content.style.left = result.x + "px";      content.style.top = result.y + "px";      content.setAttribute("data-side", result.placement.split("-")[0]);      content.style.setProperty(        "--tui-dropdownmenu-transform-origin",        anchorOrigin(result, trigger.getBoundingClientRect(), 0),      );      content.offsetHeight; // flush styles before re-enabling transitions      content.style.transition = "";      content.style.visibility = "";      content.setAttribute("data-state", "open");      trigger.setAttribute("data-state", "open");      if (focusFirst) focusItem(itemsIn(content)[0] || content);    });  }   // Closes with the exit animation.  function closeSub(sub) {    const { trigger, content } = subParts(sub);    if (!trigger || !content) return;    content.setAttribute("data-state", "closed");    trigger.setAttribute("data-state", "closed");    setTimeout(() => {      if (content.getAttribute("data-state") === "closed") {        content.classList.add("hidden");      }    }, EXIT_MS);  }   // Closes immediately (used when the whole menu goes away).  function closeSubNow(sub) {    clearTimeout(sub._tuiOpen);    clearTimeout(sub._tuiClose);    sub._tuiOpen = null;    sub._tuiClose = null;    const { trigger, content } = subParts(sub);    if (!trigger || !content) return;    content.classList.add("hidden");    content.setAttribute("data-state", "closed");    trigger.setAttribute("data-state", "closed");  }   // Hover intent: while the pointer is over a sub (trigger or its content),  // keep it open; everything else in the menu schedules its subs to close.  document.addEventListener("mouseover", (e) => {    if (!(e.target instanceof Element)) return;    const menu = e.target.closest("[data-tui-dropdownmenu-content]");    if (!menu) return;    const hovered = e.target.closest("[data-tui-dropdownmenu-sub]");     menu.querySelectorAll("[data-tui-dropdownmenu-sub]").forEach((sub) => {      const { content } = subParts(sub);      if (!content) return;      const isOpen = content.getAttribute("data-state") === "open";      const onPath = hovered && (sub === hovered || sub.contains(hovered));       if (onPath) {        clearTimeout(sub._tuiClose);        sub._tuiClose = null;        if (!isOpen && !sub._tuiOpen) {          sub._tuiOpen = setTimeout(() => {            sub._tuiOpen = null;            openSub(sub);          }, SUB_OPEN_DELAY);        }      } else {        clearTimeout(sub._tuiOpen);        sub._tuiOpen = null;        if (isOpen && !sub._tuiClose) {          sub._tuiClose = setTimeout(() => {            sub._tuiClose = null;            closeSub(sub);          }, SUB_CLOSE_DELAY);        }      }    });  });   // The highlight follows the pointer: focus the item under it, fall back to  // the menu container when the pointer sits on empty menu space.  document.addEventListener("pointermove", (e) => {    if (!(e.target instanceof Element)) return;    const content = e.target.closest("[data-tui-dropdownmenu-content]");    if (!content || content.getAttribute("data-state") !== "open") return;    const item = e.target.closest(ITEM_SELECTOR);    if (item && containerOf(item)) {      focusItem(item);    } else {      const container = containerOf(e.target) || popupFor(content);      if (container && !container.contains(document.activeElement)) return;      if (container && document.activeElement !== container) {        container.focus({ preventScroll: true });      }    }  });   // ----- init (portal up front, like React does on mount) --------------------   // Lift SSR'd contents out of their inert <template> wrappers into <body>,  // replacing a stale portaled copy on re-swaps (e.g. htmx).  function liftTemplates() {    document.querySelectorAll("template[data-tui-dropdownmenu-portal]").forEach((tpl) => {      const content = tpl.content.querySelector("[data-tui-dropdownmenu-content]");      if (content) {        const stale = document.getElementById(content.id);        if (stale) stale.remove();        document.body.appendChild(content);      }      tpl.remove();    });  }   function initMenus() {    liftTemplates();    document.querySelectorAll("[data-tui-dropdownmenu-trigger]").forEach((trigger) => {      const content = contentFor(trigger);      if (content) portal(content);    });  }   let initQueued = false;  function queueInit() {    if (initQueued) return;    initQueued = true;    requestAnimationFrame(() => {      initQueued = false;      initMenus();    });  }   if (document.readyState === "loading") {    document.addEventListener("DOMContentLoaded", initMenus);  } else {    initMenus();  }  new MutationObserver((mutations) => {    for (const m of mutations) {      if (m.addedNodes.length) {        queueInit();        break;      }    }  }).observe(document.documentElement, { childList: true, subtree: true });   // ----- events ---------------------------------------------------------------   // Pointer interactions toggle and dismiss on PRESS, exactly like Base UI.  // Click is never used for open/close, so the stray click the browser fires  // on <body> after the menu opened over the trigger is naturally harmless.  function toggle(trigger, focusFirst) {    const content = contentFor(trigger);    if (!content) return;    if (content.getAttribute("data-state") === "open") {      close(content);    } else {      open(content, trigger, focusFirst);    }  }   document.addEventListener("pointerdown", (e) => {    if (e.button !== 0 || !(e.target instanceof Element)) return;    const trigger = e.target.closest("[data-tui-dropdownmenu-trigger]");    if (trigger) {      if (!trigger.disabled) toggle(trigger, false);      return;    }    if (!e.target.closest("[data-tui-dropdownmenu-content]")) closeAll(false);  });   document.addEventListener("click", (e) => {    if (!(e.target instanceof Element)) return;    const trigger = e.target.closest("[data-tui-dropdownmenu-trigger]");    if (trigger) {      // Keyboard activation only (Enter/Space fire a detail-0 click without      // a preceding pointerdown); pointer presses are handled on pointerdown.      if (e.detail === 0 && !trigger.disabled) toggle(trigger, true);      return;    }     // Clicking a submenu trigger opens it right away.    const subTrigger = e.target.closest("[data-tui-dropdownmenu-sub-trigger]");    if (subTrigger) {      const sub = subTrigger.closest("[data-tui-dropdownmenu-sub]");      if (sub) {        clearTimeout(sub._tuiOpen);        sub._tuiOpen = null;        openSub(sub, e.detail === 0);      }      return;    }     // Checkbox items toggle and keep the menu open.    const checkbox = e.target.closest("[data-tui-dropdownmenu-checkbox-item]");    if (checkbox) {      if (!checkbox.disabled) {        const on = checkbox.getAttribute("data-state") === "checked";        checkbox.setAttribute("data-state", on ? "unchecked" : "checked");        checkbox.setAttribute("aria-checked", on ? "false" : "true");        checkbox.dispatchEvent(          new CustomEvent("dropdownmenu-checked-change", {            bubbles: true,            detail: { checked: !on },          }),        );      }      return;    }     // Radio items select within their group and keep the menu open.    const radio = e.target.closest("[data-tui-dropdownmenu-radio-item]");    if (radio) {      if (!radio.disabled) {        const group = radio.closest("[data-tui-dropdownmenu-radio-group]");        if (group) {          group.querySelectorAll("[data-tui-dropdownmenu-radio-item]").forEach((r) => {            r.setAttribute("data-state", "unchecked");            r.setAttribute("aria-checked", "false");          });        }        radio.setAttribute("data-state", "checked");        radio.setAttribute("aria-checked", "true");        radio.dispatchEvent(          new CustomEvent("dropdownmenu-value-change", {            bubbles: true,            detail: { value: radio.getAttribute("data-tui-dropdownmenu-radio-value") },          }),        );      }      return;    }     const item = e.target.closest("[data-tui-dropdownmenu-item]");    if (item) {      if (        item.getAttribute("aria-disabled") !== "true" &&        item.getAttribute("data-tui-dropdownmenu-disable-close-on-click") !== "true"      ) {        const content = item.closest("[data-tui-dropdownmenu-content]");        if (content) close(content, true);      }      return;    }  });   document.addEventListener("keydown", (e) => {    const content = anyOpen();    if (!content) return;     if (e.key === "Escape") {      closeAll(true);      return;    }    if (e.key === "Tab") {      closeAll(false);      return;    }     const active = document.activeElement;    if (!content.contains(active)) return;    const container = containerOf(active) || popupFor(content);    if (!container) return;     switch (e.key) {      case "ArrowDown":        e.preventDefault();        moveFocus(container, 1);        break;      case "ArrowUp":        e.preventDefault();        moveFocus(container, -1);        break;      case "Home": {        e.preventDefault();        const items = itemsIn(container);        focusItem(items[0]);        break;      }      case "End": {        e.preventDefault();        const items = itemsIn(container);        focusItem(items[items.length - 1]);        break;      }      case "ArrowRight": {        const subTrigger = active.closest("[data-tui-dropdownmenu-sub-trigger]");        if (subTrigger) {          e.preventDefault();          const sub = subTrigger.closest("[data-tui-dropdownmenu-sub]");          if (sub) openSub(sub, true);        }        break;      }      case "ArrowLeft": {        const subContent = active.closest("[data-tui-dropdownmenu-sub-content]");        if (subContent) {          e.preventDefault();          const sub = subContent.closest("[data-tui-dropdownmenu-sub]");          if (sub) {            const { trigger } = subParts(sub);            closeSub(sub);            if (trigger) trigger.focus({ preventScroll: true });          }        }        break;      }    }  });   // Keep open menus anchored to their trigger while scrolling or resizing.  function repositionOpen() {    allContents().forEach((content) => {      if (content.getAttribute("data-state") !== "open") return;      const trigger = triggerFor(content);      if (trigger) positionMenu(content, trigger);    });  }  window.addEventListener("scroll", repositionOpen, true);  window.addEventListener("resize", repositionOpen);})();

components/floatingui/floating_ui_core.js

// https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]!(function (t, e) {  "object" == typeof exports && "undefined" != typeof module    ? e(exports)    : "function" == typeof define && define.amd    ? define(["exports"], e)    : e(        ((t =          "undefined" != typeof globalThis            ? globalThis            : t || self).FloatingUICore = {})      );})(this, function (t) {  "use strict";  const e = ["top", "right", "bottom", "left"],    n = ["start", "end"],    i = e.reduce((t, e) => t.concat(e, e + "-" + n[0], e + "-" + n[1]), []),    o = Math.min,    r = Math.max,    a = { left: "right", right: "left", bottom: "top", top: "bottom" },    l = { start: "end", end: "start" };  function s(t, e, n) {    return r(t, o(e, n));  }  function f(t, e) {    return "function" == typeof t ? t(e) : t;  }  function c(t) {    return t.split("-")[0];  }  function u(t) {    return t.split("-")[1];  }  function m(t) {    return "x" === t ? "y" : "x";  }  function d(t) {    return "y" === t ? "height" : "width";  }  function g(t) {    return ["top", "bottom"].includes(c(t)) ? "y" : "x";  }  function p(t) {    return m(g(t));  }  function h(t, e, n) {    void 0 === n && (n = !1);    const i = u(t),      o = p(t),      r = d(o);    let a =      "x" === o        ? i === (n ? "end" : "start")          ? "right"          : "left"        : "start" === i        ? "bottom"        : "top";    return e.reference[r] > e.floating[r] && (a = w(a)), [a, w(a)];  }  function y(t) {    return t.replace(/start|end/g, (t) => l[t]);  }  function w(t) {    return t.replace(/left|right|bottom|top/g, (t) => a[t]);  }  function x(t) {    return "number" != typeof t      ? (function (t) {          return { top: 0, right: 0, bottom: 0, left: 0, ...t };        })(t)      : { top: t, right: t, bottom: t, left: t };  }  function v(t) {    const { x: e, y: n, width: i, height: o } = t;    return {      width: i,      height: o,      top: n,      left: e,      right: e + i,      bottom: n + o,      x: e,      y: n,    };  }  function b(t, e, n) {    let { reference: i, floating: o } = t;    const r = g(e),      a = p(e),      l = d(a),      s = c(e),      f = "y" === r,      m = i.x + i.width / 2 - o.width / 2,      h = i.y + i.height / 2 - o.height / 2,      y = i[l] / 2 - o[l] / 2;    let w;    switch (s) {      case "top":        w = { x: m, y: i.y - o.height };        break;      case "bottom":        w = { x: m, y: i.y + i.height };        break;      case "right":        w = { x: i.x + i.width, y: h };        break;      case "left":        w = { x: i.x - o.width, y: h };        break;      default:        w = { x: i.x, y: i.y };    }    switch (u(e)) {      case "start":        w[a] -= y * (n && f ? -1 : 1);        break;      case "end":        w[a] += y * (n && f ? -1 : 1);    }    return w;  }  async function A(t, e) {    var n;    void 0 === e && (e = {});    const { x: i, y: o, platform: r, rects: a, elements: l, strategy: s } = t,      {        boundary: c = "clippingAncestors",        rootBoundary: u = "viewport",        elementContext: m = "floating",        altBoundary: d = !1,        padding: g = 0,      } = f(e, t),      p = x(g),      h = l[d ? ("floating" === m ? "reference" : "floating") : m],      y = v(        await r.getClippingRect({          element:            null ==              (n = await (null == r.isElement ? void 0 : r.isElement(h))) || n              ? h              : h.contextElement ||                (await (null == r.getDocumentElement                  ? void 0                  : r.getDocumentElement(l.floating))),          boundary: c,          rootBoundary: u,          strategy: s,        })      ),      w =        "floating" === m          ? { x: i, y: o, width: a.floating.width, height: a.floating.height }          : a.reference,      b = await (null == r.getOffsetParent        ? void 0        : r.getOffsetParent(l.floating)),      A = ((await (null == r.isElement ? void 0 : r.isElement(b))) &&        (await (null == r.getScale ? void 0 : r.getScale(b)))) || {        x: 1,        y: 1,      },      R = v(        r.convertOffsetParentRelativeRectToViewportRelativeRect          ? await r.convertOffsetParentRelativeRectToViewportRelativeRect({              elements: l,              rect: w,              offsetParent: b,              strategy: s,            })          : w      );    return {      top: (y.top - R.top + p.top) / A.y,      bottom: (R.bottom - y.bottom + p.bottom) / A.y,      left: (y.left - R.left + p.left) / A.x,      right: (R.right - y.right + p.right) / A.x,    };  }  function R(t, e) {    return {      top: t.top - e.height,      right: t.right - e.width,      bottom: t.bottom - e.height,      left: t.left - e.width,    };  }  function P(t) {    return e.some((e) => t[e] >= 0);  }  function D(t) {    const e = o(...t.map((t) => t.left)),      n = o(...t.map((t) => t.top));    return {      x: e,      y: n,      width: r(...t.map((t) => t.right)) - e,      height: r(...t.map((t) => t.bottom)) - n,    };  }  (t.arrow = (t) => ({    name: "arrow",    options: t,    async fn(e) {      const {          x: n,          y: i,          placement: r,          rects: a,          platform: l,          elements: c,          middlewareData: m,        } = e,        { element: g, padding: h = 0 } = f(t, e) || {};      if (null == g) return {};      const y = x(h),        w = { x: n, y: i },        v = p(r),        b = d(v),        A = await l.getDimensions(g),        R = "y" === v,        P = R ? "top" : "left",        D = R ? "bottom" : "right",        T = R ? "clientHeight" : "clientWidth",        O = a.reference[b] + a.reference[v] - w[v] - a.floating[b],        E = w[v] - a.reference[v],        L = await (null == l.getOffsetParent ? void 0 : l.getOffsetParent(g));      let k = L ? L[T] : 0;      (k && (await (null == l.isElement ? void 0 : l.isElement(L)))) ||        (k = c.floating[T] || a.floating[b]);      const C = O / 2 - E / 2,        B = k / 2 - A[b] / 2 - 1,        H = o(y[P], B),        S = o(y[D], B),        F = H,        j = k - A[b] - S,        z = k / 2 - A[b] / 2 + C,        M = s(F, z, j),        V =          !m.arrow &&          null != u(r) &&          z !== M &&          a.reference[b] / 2 - (z < F ? H : S) - A[b] / 2 < 0,        W = V ? (z < F ? z - F : z - j) : 0;      return {        [v]: w[v] + W,        data: {          [v]: M,          centerOffset: z - M - W,          ...(V && { alignmentOffset: W }),        },        reset: V,      };    },  })),    (t.autoPlacement = function (t) {      return (        void 0 === t && (t = {}),        {          name: "autoPlacement",          options: t,          async fn(e) {            var n, o, r;            const {                rects: a,                middlewareData: l,                placement: s,                platform: m,                elements: d,              } = e,              {                crossAxis: g = !1,                alignment: p,                allowedPlacements: w = i,                autoAlignment: x = !0,                ...v              } = f(t, e),              b =                void 0 !== p || w === i                  ? (function (t, e, n) {                      return (                        t                          ? [                              ...n.filter((e) => u(e) === t),                              ...n.filter((e) => u(e) !== t),                            ]                          : n.filter((t) => c(t) === t)                      ).filter((n) => !t || u(n) === t || (!!e && y(n) !== n));                    })(p || null, x, w)                  : w,              R = await A(e, v),              P = (null == (n = l.autoPlacement) ? void 0 : n.index) || 0,              D = b[P];            if (null == D) return {};            const T = h(              D,              a,              await (null == m.isRTL ? void 0 : m.isRTL(d.floating))            );            if (s !== D) return { reset: { placement: b[0] } };            const O = [R[c(D)], R[T[0]], R[T[1]]],              E = [                ...((null == (o = l.autoPlacement) ? void 0 : o.overflows) ||                  []),                { placement: D, overflows: O },              ],              L = b[P + 1];            if (L)              return {                data: { index: P + 1, overflows: E },                reset: { placement: L },              };            const k = E.map((t) => {                const e = u(t.placement);                return [                  t.placement,                  e && g                    ? t.overflows.slice(0, 2).reduce((t, e) => t + e, 0)                    : t.overflows[0],                  t.overflows,                ];              }).sort((t, e) => t[1] - e[1]),              C =                (null ==                (r = k.filter((t) =>                  t[2].slice(0, u(t[0]) ? 2 : 3).every((t) => t <= 0)                )[0])                  ? void 0                  : r[0]) || k[0][0];            return C !== s              ? {                  data: { index: P + 1, overflows: E },                  reset: { placement: C },                }              : {};          },        }      );    }),    (t.computePosition = async (t, e, n) => {      const {          placement: i = "bottom",          strategy: o = "absolute",          middleware: r = [],          platform: a,        } = n,        l = r.filter(Boolean),        s = await (null == a.isRTL ? void 0 : a.isRTL(e));      let f = await a.getElementRects({          reference: t,          floating: e,          strategy: o,        }),        { x: c, y: u } = b(f, i, s),        m = i,        d = {},        g = 0;      for (let n = 0; n < l.length; n++) {        const { name: r, fn: p } = l[n],          {            x: h,            y: y,            data: w,            reset: x,          } = await p({            x: c,            y: u,            initialPlacement: i,            placement: m,            strategy: o,            middlewareData: d,            rects: f,            platform: a,            elements: { reference: t, floating: e },          });        (c = null != h ? h : c),          (u = null != y ? y : u),          (d = { ...d, [r]: { ...d[r], ...w } }),          x &&            g <= 50 &&            (g++,            "object" == typeof x &&              (x.placement && (m = x.placement),              x.rects &&                (f =                  !0 === x.rects                    ? await a.getElementRects({                        reference: t,                        floating: e,                        strategy: o,                      })                    : x.rects),              ({ x: c, y: u } = b(f, m, s))),            (n = -1));      }      return { x: c, y: u, placement: m, strategy: o, middlewareData: d };    }),    (t.detectOverflow = A),    (t.flip = function (t) {      return (        void 0 === t && (t = {}),        {          name: "flip",          options: t,          async fn(e) {            var n, i;            const {                placement: o,                middlewareData: r,                rects: a,                initialPlacement: l,                platform: s,                elements: m,              } = e,              {                mainAxis: d = !0,                crossAxis: p = !0,                fallbackPlacements: x,                fallbackStrategy: v = "bestFit",                fallbackAxisSideDirection: b = "none",                flipAlignment: R = !0,                ...P              } = f(t, e);            if (null != (n = r.arrow) && n.alignmentOffset) return {};            const D = c(o),              T = g(l),              O = c(l) === l,              E = await (null == s.isRTL ? void 0 : s.isRTL(m.floating)),              L =                x ||                (O || !R                  ? [w(l)]                  : (function (t) {                      const e = w(t);                      return [y(t), e, y(e)];                    })(l)),              k = "none" !== b;            !x &&              k &&              L.push(                ...(function (t, e, n, i) {                  const o = u(t);                  let r = (function (t, e, n) {                    const i = ["left", "right"],                      o = ["right", "left"],                      r = ["top", "bottom"],                      a = ["bottom", "top"];                    switch (t) {                      case "top":                      case "bottom":                        return n ? (e ? o : i) : e ? i : o;                      case "left":                      case "right":                        return e ? r : a;                      default:                        return [];                    }                  })(c(t), "start" === n, i);                  return (                    o &&                      ((r = r.map((t) => t + "-" + o)),                      e && (r = r.concat(r.map(y)))),                    r                  );                })(l, R, b, E)              );            const C = [l, ...L],              B = await A(e, P),              H = [];            let S = (null == (i = r.flip) ? void 0 : i.overflows) || [];            if ((d && H.push(B[D]), p)) {              const t = h(o, a, E);              H.push(B[t[0]], B[t[1]]);            }            if (              ((S = [...S, { placement: o, overflows: H }]),              !H.every((t) => t <= 0))            ) {              var F, j;              const t = ((null == (F = r.flip) ? void 0 : F.index) || 0) + 1,                e = C[t];              if (e) {                var z;                const n = "alignment" === p && T !== g(e),                  i = (null == (z = S[0]) ? void 0 : z.overflows[0]) > 0;                if (!n || i)                  return {                    data: { index: t, overflows: S },                    reset: { placement: e },                  };              }              let n =                null ==                (j = S.filter((t) => t.overflows[0] <= 0).sort(                  (t, e) => t.overflows[1] - e.overflows[1]                )[0])                  ? void 0                  : j.placement;              if (!n)                switch (v) {                  case "bestFit": {                    var M;                    const t =                      null ==                      (M = S.filter((t) => {                        if (k) {                          const e = g(t.placement);                          return e === T || "y" === e;                        }                        return !0;                      })                        .map((t) => [                          t.placement,                          t.overflows                            .filter((t) => t > 0)                            .reduce((t, e) => t + e, 0),                        ])                        .sort((t, e) => t[1] - e[1])[0])                        ? void 0                        : M[0];                    t && (n = t);                    break;                  }                  case "initialPlacement":                    n = l;                }              if (o !== n) return { reset: { placement: n } };            }            return {};          },        }      );    }),    (t.hide = function (t) {      return (        void 0 === t && (t = {}),        {          name: "hide",          options: t,          async fn(e) {            const { rects: n } = e,              { strategy: i = "referenceHidden", ...o } = f(t, e);            switch (i) {              case "referenceHidden": {                const t = R(                  await A(e, { ...o, elementContext: "reference" }),                  n.reference                );                return {                  data: { referenceHiddenOffsets: t, referenceHidden: P(t) },                };              }              case "escaped": {                const t = R(await A(e, { ...o, altBoundary: !0 }), n.floating);                return { data: { escapedOffsets: t, escaped: P(t) } };              }              default:                return {};            }          },        }      );    }),    (t.inline = function (t) {      return (        void 0 === t && (t = {}),        {          name: "inline",          options: t,          async fn(e) {            const {                placement: n,                elements: i,                rects: a,                platform: l,                strategy: s,              } = e,              { padding: u = 2, x: m, y: d } = f(t, e),              p = Array.from(                (await (null == l.getClientRects                  ? void 0                  : l.getClientRects(i.reference))) || []              ),              h = (function (t) {                const e = t.slice().sort((t, e) => t.y - e.y),                  n = [];                let i = null;                for (let t = 0; t < e.length; t++) {                  const o = e[t];                  !i || o.y - i.y > i.height / 2                    ? n.push([o])                    : n[n.length - 1].push(o),                    (i = o);                }                return n.map((t) => v(D(t)));              })(p),              y = v(D(p)),              w = x(u);            const b = await l.getElementRects({              reference: {                getBoundingClientRect: function () {                  if (                    2 === h.length &&                    h[0].left > h[1].right &&                    null != m &&                    null != d                  )                    return (                      h.find(                        (t) =>                          m > t.left - w.left &&                          m < t.right + w.right &&                          d > t.top - w.top &&                          d < t.bottom + w.bottom                      ) || y                    );                  if (h.length >= 2) {                    if ("y" === g(n)) {                      const t = h[0],                        e = h[h.length - 1],                        i = "top" === c(n),                        o = t.top,                        r = e.bottom,                        a = i ? t.left : e.left,                        l = i ? t.right : e.right;                      return {                        top: o,                        bottom: r,                        left: a,                        right: l,                        width: l - a,                        height: r - o,                        x: a,                        y: o,                      };                    }                    const t = "left" === c(n),                      e = r(...h.map((t) => t.right)),                      i = o(...h.map((t) => t.left)),                      a = h.filter((n) => (t ? n.left === i : n.right === e)),                      l = a[0].top,                      s = a[a.length - 1].bottom;                    return {                      top: l,                      bottom: s,                      left: i,                      right: e,                      width: e - i,                      height: s - l,                      x: i,                      y: l,                    };                  }                  return y;                },              },              floating: i.floating,              strategy: s,            });            return a.reference.x !== b.reference.x ||              a.reference.y !== b.reference.y ||              a.reference.width !== b.reference.width ||              a.reference.height !== b.reference.height              ? { reset: { rects: b } }              : {};          },        }      );    }),    (t.limitShift = function (t) {      return (        void 0 === t && (t = {}),        {          options: t,          fn(e) {            const { x: n, y: i, placement: o, rects: r, middlewareData: a } = e,              { offset: l = 0, mainAxis: s = !0, crossAxis: u = !0 } = f(t, e),              d = { x: n, y: i },              p = g(o),              h = m(p);            let y = d[h],              w = d[p];            const x = f(l, e),              v =                "number" == typeof x                  ? { mainAxis: x, crossAxis: 0 }                  : { mainAxis: 0, crossAxis: 0, ...x };            if (s) {              const t = "y" === h ? "height" : "width",                e = r.reference[h] - r.floating[t] + v.mainAxis,                n = r.reference[h] + r.reference[t] - v.mainAxis;              y < e ? (y = e) : y > n && (y = n);            }            if (u) {              var b, A;              const t = "y" === h ? "width" : "height",                e = ["top", "left"].includes(c(o)),                n =                  r.reference[p] -                  r.floating[t] +                  ((e && (null == (b = a.offset) ? void 0 : b[p])) || 0) +                  (e ? 0 : v.crossAxis),                i =                  r.reference[p] +                  r.reference[t] +                  (e ? 0 : (null == (A = a.offset) ? void 0 : A[p]) || 0) -                  (e ? v.crossAxis : 0);              w < n ? (w = n) : w > i && (w = i);            }            return { [h]: y, [p]: w };          },        }      );    }),    (t.offset = function (t) {      return (        void 0 === t && (t = 0),        {          name: "offset",          options: t,          async fn(e) {            var n, i;            const { x: o, y: r, placement: a, middlewareData: l } = e,              s = await (async function (t, e) {                const { placement: n, platform: i, elements: o } = t,                  r = await (null == i.isRTL ? void 0 : i.isRTL(o.floating)),                  a = c(n),                  l = u(n),                  s = "y" === g(n),                  m = ["left", "top"].includes(a) ? -1 : 1,                  d = r && s ? -1 : 1,                  p = f(e, t);                let {                  mainAxis: h,                  crossAxis: y,                  alignmentAxis: w,                } = "number" == typeof p                  ? { mainAxis: p, crossAxis: 0, alignmentAxis: null }                  : {                      mainAxis: p.mainAxis || 0,                      crossAxis: p.crossAxis || 0,                      alignmentAxis: p.alignmentAxis,                    };                return (                  l && "number" == typeof w && (y = "end" === l ? -1 * w : w),                  s ? { x: y * d, y: h * m } : { x: h * m, y: y * d }                );              })(e, t);            return a === (null == (n = l.offset) ? void 0 : n.placement) &&              null != (i = l.arrow) &&              i.alignmentOffset              ? {}              : { x: o + s.x, y: r + s.y, data: { ...s, placement: a } };          },        }      );    }),    (t.rectToClientRect = v),    (t.shift = function (t) {      return (        void 0 === t && (t = {}),        {          name: "shift",          options: t,          async fn(e) {            const { x: n, y: i, placement: o } = e,              {                mainAxis: r = !0,                crossAxis: a = !1,                limiter: l = {                  fn: (t) => {                    let { x: e, y: n } = t;                    return { x: e, y: n };                  },                },                ...u              } = f(t, e),              d = { x: n, y: i },              p = await A(e, u),              h = g(c(o)),              y = m(h);            let w = d[y],              x = d[h];            if (r) {              const t = "y" === y ? "bottom" : "right";              w = s(w + p["y" === y ? "top" : "left"], w, w - p[t]);            }            if (a) {              const t = "y" === h ? "bottom" : "right";              x = s(x + p["y" === h ? "top" : "left"], x, x - p[t]);            }            const v = l.fn({ ...e, [y]: w, [h]: x });            return {              ...v,              data: { x: v.x - n, y: v.y - i, enabled: { [y]: r, [h]: a } },            };          },        }      );    }),    (t.size = function (t) {      return (        void 0 === t && (t = {}),        {          name: "size",          options: t,          async fn(e) {            var n, i;            const { placement: a, rects: l, platform: s, elements: m } = e,              { apply: d = () => {}, ...p } = f(t, e),              h = await A(e, p),              y = c(a),              w = u(a),              x = "y" === g(a),              { width: v, height: b } = l.floating;            let R, P;            "top" === y || "bottom" === y              ? ((R = y),                (P =                  w ===                  ((await (null == s.isRTL ? void 0 : s.isRTL(m.floating)))                    ? "start"                    : "end")                    ? "left"                    : "right"))              : ((P = y), (R = "end" === w ? "top" : "bottom"));            const D = b - h.top - h.bottom,              T = v - h.left - h.right,              O = o(b - h[R], D),              E = o(v - h[P], T),              L = !e.middlewareData.shift;            let k = O,              C = E;            if (              (null != (n = e.middlewareData.shift) && n.enabled.x && (C = T),              null != (i = e.middlewareData.shift) && i.enabled.y && (k = D),              L && !w)            ) {              const t = r(h.left, 0),                e = r(h.right, 0),                n = r(h.top, 0),                i = r(h.bottom, 0);              x                ? (C =                    v - 2 * (0 !== t || 0 !== e ? t + e : r(h.left, h.right)))                : (k =                    b - 2 * (0 !== n || 0 !== i ? n + i : r(h.top, h.bottom)));            }            await d({ ...e, availableWidth: C, availableHeight: k });            const B = await s.getDimensions(m.floating);            return v !== B.width || b !== B.height              ? { reset: { rects: !0 } }              : {};          },        }      );    });});

components/floatingui/floating_ui_dom.js

// https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]!(function (t, e) {  "object" == typeof exports && "undefined" != typeof module    ? e(exports, require("./floating_ui_core"))    : "function" == typeof define && define.amd    ? define(["exports", "./floatingUICore"], e)    : e(        ((t =          "undefined" != typeof globalThis            ? globalThis            : t || self).FloatingUIDOM = {}),        t.FloatingUICore      );})(this, function (t, e) {  "use strict";  const n = Math.min,    o = Math.max,    i = Math.round,    r = Math.floor,    c = (t) => ({ x: t, y: t });  function l() {    return "undefined" != typeof window;  }  function s(t) {    return a(t) ? (t.nodeName || "").toLowerCase() : "#document";  }  function f(t) {    var e;    return (      (null == t || null == (e = t.ownerDocument) ? void 0 : e.defaultView) ||      window    );  }  function u(t) {    var e;    return null ==      (e = (a(t) ? t.ownerDocument : t.document) || window.document)      ? void 0      : e.documentElement;  }  function a(t) {    return !!l() && (t instanceof Node || t instanceof f(t).Node);  }  function d(t) {    return !!l() && (t instanceof Element || t instanceof f(t).Element);  }  function h(t) {    return !!l() && (t instanceof HTMLElement || t instanceof f(t).HTMLElement);  }  function p(t) {    return (      !(!l() || "undefined" == typeof ShadowRoot) &&      (t instanceof ShadowRoot || t instanceof f(t).ShadowRoot)    );  }  function g(t) {    const { overflow: e, overflowX: n, overflowY: o, display: i } = b(t);    return (      /auto|scroll|overlay|hidden|clip/.test(e + o + n) &&      !["inline", "contents"].includes(i)    );  }  function m(t) {    return ["table", "td", "th"].includes(s(t));  }  function y(t) {    return [":popover-open", ":modal"].some((e) => {      try {        return t.matches(e);      } catch (t) {        return !1;      }    });  }  function w(t) {    const e = x(),      n = d(t) ? b(t) : t;    return (      ["transform", "translate", "scale", "rotate", "perspective"].some(        (t) => !!n[t] && "none" !== n[t]      ) ||      (!!n.containerType && "normal" !== n.containerType) ||      (!e && !!n.backdropFilter && "none" !== n.backdropFilter) ||      (!e && !!n.filter && "none" !== n.filter) ||      [        "transform",        "translate",        "scale",        "rotate",        "perspective",        "filter",      ].some((t) => (n.willChange || "").includes(t)) ||      ["paint", "layout", "strict", "content"].some((t) =>        (n.contain || "").includes(t)      )    );  }  function x() {    return (      !("undefined" == typeof CSS || !CSS.supports) &&      CSS.supports("-webkit-backdrop-filter", "none")    );  }  function v(t) {    return ["html", "body", "#document"].includes(s(t));  }  function b(t) {    return f(t).getComputedStyle(t);  }  function T(t) {    return d(t)      ? { scrollLeft: t.scrollLeft, scrollTop: t.scrollTop }      : { scrollLeft: t.scrollX, scrollTop: t.scrollY };  }  function L(t) {    if ("html" === s(t)) return t;    const e = t.assignedSlot || t.parentNode || (p(t) && t.host) || u(t);    return p(e) ? e.host : e;  }  function R(t) {    const e = L(t);    return v(e)      ? t.ownerDocument        ? t.ownerDocument.body        : t.body      : h(e) && g(e)      ? e      : R(e);  }  function C(t, e, n) {    var o;    void 0 === e && (e = []), void 0 === n && (n = !0);    const i = R(t),      r = i === (null == (o = t.ownerDocument) ? void 0 : o.body),      c = f(i);    if (r) {      const t = E(c);      return e.concat(        c,        c.visualViewport || [],        g(i) ? i : [],        t && n ? C(t) : []      );    }    return e.concat(i, C(i, [], n));  }  function E(t) {    return t.parent && Object.getPrototypeOf(t.parent) ? t.frameElement : null;  }  function S(t) {    const e = b(t);    let n = parseFloat(e.width) || 0,      o = parseFloat(e.height) || 0;    const r = h(t),      c = r ? t.offsetWidth : n,      l = r ? t.offsetHeight : o,      s = i(n) !== c || i(o) !== l;    return s && ((n = c), (o = l)), { width: n, height: o, $: s };  }  function F(t) {    return d(t) ? t : t.contextElement;  }  function O(t) {    const e = F(t);    if (!h(e)) return c(1);    const n = e.getBoundingClientRect(),      { width: o, height: r, $: l } = S(e);    let s = (l ? i(n.width) : n.width) / o,      f = (l ? i(n.height) : n.height) / r;    return (      (s && Number.isFinite(s)) || (s = 1),      (f && Number.isFinite(f)) || (f = 1),      { x: s, y: f }    );  }  const D = c(0);  function H(t) {    const e = f(t);    return x() && e.visualViewport      ? { x: e.visualViewport.offsetLeft, y: e.visualViewport.offsetTop }      : D;  }  function P(t, n, o, i) {    void 0 === n && (n = !1), void 0 === o && (o = !1);    const r = t.getBoundingClientRect(),      l = F(t);    let s = c(1);    n && (i ? d(i) && (s = O(i)) : (s = O(t)));    const u = (function (t, e, n) {      return void 0 === e && (e = !1), !(!n || (e && n !== f(t))) && e;    })(l, o, i)      ? H(l)      : c(0);    let a = (r.left + u.x) / s.x,      h = (r.top + u.y) / s.y,      p = r.width / s.x,      g = r.height / s.y;    if (l) {      const t = f(l),        e = i && d(i) ? f(i) : i;      let n = t,        o = E(n);      for (; o && i && e !== n; ) {        const t = O(o),          e = o.getBoundingClientRect(),          i = b(o),          r = e.left + (o.clientLeft + parseFloat(i.paddingLeft)) * t.x,          c = e.top + (o.clientTop + parseFloat(i.paddingTop)) * t.y;        (a *= t.x),          (h *= t.y),          (p *= t.x),          (g *= t.y),          (a += r),          (h += c),          (n = f(o)),          (o = E(n));      }    }    return e.rectToClientRect({ width: p, height: g, x: a, y: h });  }  function W(t, e) {    const n = T(t).scrollLeft;    return e ? e.left + n : P(u(t)).left + n;  }  function M(t, e, n) {    void 0 === n && (n = !1);    const o = t.getBoundingClientRect();    return {      x: o.left + e.scrollLeft - (n ? 0 : W(t, o)),      y: o.top + e.scrollTop,    };  }  function z(t, n, i) {    let r;    if ("viewport" === n)      r = (function (t, e) {        const n = f(t),          o = u(t),          i = n.visualViewport;        let r = o.clientWidth,          c = o.clientHeight,          l = 0,          s = 0;        if (i) {          (r = i.width), (c = i.height);          const t = x();          (!t || (t && "fixed" === e)) &&            ((l = i.offsetLeft), (s = i.offsetTop));        }        return { width: r, height: c, x: l, y: s };      })(t, i);    else if ("document" === n)      r = (function (t) {        const e = u(t),          n = T(t),          i = t.ownerDocument.body,          r = o(e.scrollWidth, e.clientWidth, i.scrollWidth, i.clientWidth),          c = o(e.scrollHeight, e.clientHeight, i.scrollHeight, i.clientHeight);        let l = -n.scrollLeft + W(t);        const s = -n.scrollTop;        return (          "rtl" === b(i).direction &&            (l += o(e.clientWidth, i.clientWidth) - r),          { width: r, height: c, x: l, y: s }        );      })(u(t));    else if (d(n))      r = (function (t, e) {        const n = P(t, !0, "fixed" === e),          o = n.top + t.clientTop,          i = n.left + t.clientLeft,          r = h(t) ? O(t) : c(1);        return {          width: t.clientWidth * r.x,          height: t.clientHeight * r.y,          x: i * r.x,          y: o * r.y,        };      })(n, i);    else {      const e = H(t);      r = { x: n.x - e.x, y: n.y - e.y, width: n.width, height: n.height };    }    return e.rectToClientRect(r);  }  function A(t, e) {    const n = L(t);    return (      !(n === e || !d(n) || v(n)) && ("fixed" === b(n).position || A(n, e))    );  }  function B(t, e, n) {    const o = h(e),      i = u(e),      r = "fixed" === n,      l = P(t, !0, r, e);    let f = { scrollLeft: 0, scrollTop: 0 };    const a = c(0);    function d() {      a.x = W(i);    }    if (o || (!o && !r))      if ((("body" !== s(e) || g(i)) && (f = T(e)), o)) {        const t = P(e, !0, r, e);        (a.x = t.x + e.clientLeft), (a.y = t.y + e.clientTop);      } else i && d();    r && !o && i && d();    const p = !i || o || r ? c(0) : M(i, f);    return {      x: l.left + f.scrollLeft - a.x - p.x,      y: l.top + f.scrollTop - a.y - p.y,      width: l.width,      height: l.height,    };  }  function V(t) {    return "static" === b(t).position;  }  function N(t, e) {    if (!h(t) || "fixed" === b(t).position) return null;    if (e) return e(t);    let n = t.offsetParent;    return u(t) === n && (n = n.ownerDocument.body), n;  }  function I(t, e) {    const n = f(t);    if (y(t)) return n;    if (!h(t)) {      let e = L(t);      for (; e && !v(e); ) {        if (d(e) && !V(e)) return e;        e = L(e);      }      return n;    }    let o = N(t, e);    for (; o && m(o) && V(o); ) o = N(o, e);    return o && v(o) && V(o) && !w(o)      ? n      : o ||          (function (t) {            let e = L(t);            for (; h(e) && !v(e); ) {              if (w(e)) return e;              if (y(e)) return null;              e = L(e);            }            return null;          })(t) ||          n;  }  const k = {    convertOffsetParentRelativeRectToViewportRelativeRect: function (t) {      let { elements: e, rect: n, offsetParent: o, strategy: i } = t;      const r = "fixed" === i,        l = u(o),        f = !!e && y(e.floating);      if (o === l || (f && r)) return n;      let a = { scrollLeft: 0, scrollTop: 0 },        d = c(1);      const p = c(0),        m = h(o);      if (        (m || (!m && !r)) &&        (("body" !== s(o) || g(l)) && (a = T(o)), h(o))      ) {        const t = P(o);        (d = O(o)), (p.x = t.x + o.clientLeft), (p.y = t.y + o.clientTop);      }      const w = !l || m || r ? c(0) : M(l, a, !0);      return {        width: n.width * d.x,        height: n.height * d.y,        x: n.x * d.x - a.scrollLeft * d.x + p.x + w.x,        y: n.y * d.y - a.scrollTop * d.y + p.y + w.y,      };    },    getDocumentElement: u,    getClippingRect: function (t) {      let { element: e, boundary: i, rootBoundary: r, strategy: c } = t;      const l = [          ...("clippingAncestors" === i            ? y(e)              ? []              : (function (t, e) {                  const n = e.get(t);                  if (n) return n;                  let o = C(t, [], !1).filter((t) => d(t) && "body" !== s(t)),                    i = null;                  const r = "fixed" === b(t).position;                  let c = r ? L(t) : t;                  for (; d(c) && !v(c); ) {                    const e = b(c),                      n = w(c);                    n || "fixed" !== e.position || (i = null),                      (                        r                          ? !n && !i                          : (!n &&                              "static" === e.position &&                              i &&                              ["absolute", "fixed"].includes(i.position)) ||                            (g(c) && !n && A(t, c))                      )                        ? (o = o.filter((t) => t !== c))                        : (i = e),                      (c = L(c));                  }                  return e.set(t, o), o;                })(e, this._c)            : [].concat(i)),          r,        ],        f = l[0],        u = l.reduce((t, i) => {          const r = z(e, i, c);          return (            (t.top = o(r.top, t.top)),            (t.right = n(r.right, t.right)),            (t.bottom = n(r.bottom, t.bottom)),            (t.left = o(r.left, t.left)),            t          );        }, z(e, f, c));      return {        width: u.right - u.left,        height: u.bottom - u.top,        x: u.left,        y: u.top,      };    },    getOffsetParent: I,    getElementRects: async function (t) {      const e = this.getOffsetParent || I,        n = this.getDimensions,        o = await n(t.floating);      return {        reference: B(t.reference, await e(t.floating), t.strategy),        floating: { x: 0, y: 0, width: o.width, height: o.height },      };    },    getClientRects: function (t) {      return Array.from(t.getClientRects());    },    getDimensions: function (t) {      const { width: e, height: n } = S(t);      return { width: e, height: n };    },    getScale: O,    isElement: d,    isRTL: function (t) {      return "rtl" === b(t).direction;    },  };  function q(t, e) {    return (      t.x === e.x && t.y === e.y && t.width === e.width && t.height === e.height    );  }  const U = e.detectOverflow,    j = e.offset,    X = e.autoPlacement,    Y = e.shift,    $ = e.flip,    _ = e.size,    G = e.hide,    J = e.arrow,    K = e.inline,    Q = e.limitShift;  (t.arrow = J),    (t.autoPlacement = X),    (t.autoUpdate = function (t, e, i, c) {      void 0 === c && (c = {});      const {          ancestorScroll: l = !0,          ancestorResize: s = !0,          elementResize: f = "function" == typeof ResizeObserver,          layoutShift: a = "function" == typeof IntersectionObserver,          animationFrame: d = !1,        } = c,        h = F(t),        p = l || s ? [...(h ? C(h) : []), ...C(e)] : [];      p.forEach((t) => {        l && t.addEventListener("scroll", i, { passive: !0 }),          s && t.addEventListener("resize", i);      });      const g =        h && a          ? (function (t, e) {              let i,                c = null;              const l = u(t);              function s() {                var t;                clearTimeout(i), null == (t = c) || t.disconnect(), (c = null);              }              return (                (function f(u, a) {                  void 0 === u && (u = !1), void 0 === a && (a = 1), s();                  const d = t.getBoundingClientRect(),                    { left: h, top: p, width: g, height: m } = d;                  if ((u || e(), !g || !m)) return;                  const y = {                    rootMargin:                      -r(p) +                      "px " +                      -r(l.clientWidth - (h + g)) +                      "px " +                      -r(l.clientHeight - (p + m)) +                      "px " +                      -r(h) +                      "px",                    threshold: o(0, n(1, a)) || 1,                  };                  let w = !0;                  function x(e) {                    const n = e[0].intersectionRatio;                    if (n !== a) {                      if (!w) return f();                      n                        ? f(!1, n)                        : (i = setTimeout(() => {                            f(!1, 1e-7);                          }, 1e3));                    }                    1 !== n || q(d, t.getBoundingClientRect()) || f(), (w = !1);                  }                  try {                    c = new IntersectionObserver(x, {                      ...y,                      root: l.ownerDocument,                    });                  } catch (t) {                    c = new IntersectionObserver(x, y);                  }                  c.observe(t);                })(!0),                s              );            })(h, i)          : null;      let m,        y = -1,        w = null;      f &&        ((w = new ResizeObserver((t) => {          let [n] = t;          n &&            n.target === h &&            w &&            (w.unobserve(e),            cancelAnimationFrame(y),            (y = requestAnimationFrame(() => {              var t;              null == (t = w) || t.observe(e);            }))),            i();        })),        h && !d && w.observe(h),        w.observe(e));      let x = d ? P(t) : null;      return (        d &&          (function e() {            const n = P(t);            x && !q(x, n) && i();            (x = n), (m = requestAnimationFrame(e));          })(),        i(),        () => {          var t;          p.forEach((t) => {            l && t.removeEventListener("scroll", i),              s && t.removeEventListener("resize", i);          }),            null == g || g(),            null == (t = w) || t.disconnect(),            (w = null),            d && cancelAnimationFrame(m);        }      );    }),    (t.computePosition = (t, n, o) => {      const i = new Map(),        r = { platform: k, ...o },        c = { ...r.platform, _c: i };      return e.computePosition(t, n, { ...r, platform: c });    }),    (t.detectOverflow = U),    (t.flip = $),    (t.getOverflowAncestors = C),    (t.hide = G),    (t.inline = K),    (t.limitShift = Q),    (t.offset = j),    (t.platform = k),    (t.shift = Y),    (t.size = _);   // We put this manually here because we need to make sure it's available  // before the popover component is initialized.  window.FloatingUIDOM = t;  return t;});

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"

@dropdownmenu.DropdownMenu() {	@button.Button(button.Props{		Variant:    button.VariantOutline,		Attributes: dropdownmenu.Trigger(ctx),	}) {		Open	}	@dropdownmenu.Content() {		@dropdownmenu.Group() {			@dropdownmenu.Label() {				My Account			}			@dropdownmenu.Item() {				Profile			}			@dropdownmenu.Item() {				Billing			}		}		@dropdownmenu.Separator()		@dropdownmenu.Group() {			@dropdownmenu.Item() {				Team			}			@dropdownmenu.Item() {				Subscription			}		}	}}

Composition

Use the following composition to build a DropdownMenu:

dropdownmenu.DropdownMenu├── dropdownmenu.Trigger└── dropdownmenu.Content    ├── dropdownmenu.Group    │   ├── dropdownmenu.Label    │   ├── dropdownmenu.Item    │   └── dropdownmenu.Item    ├── dropdownmenu.Separator    ├── dropdownmenu.Group    │   ├── dropdownmenu.Label    │   ├── dropdownmenu.CheckboxItem    │   └── dropdownmenu.CheckboxItem    ├── dropdownmenu.Separator    ├── dropdownmenu.Group    │   ├── dropdownmenu.Label    │   └── dropdownmenu.RadioGroup    │       ├── dropdownmenu.RadioItem    │       └── dropdownmenu.RadioItem    └── dropdownmenu.Sub        ├── dropdownmenu.SubTrigger        └── dropdownmenu.SubContent            └── dropdownmenu.Group                ├── dropdownmenu.Label                ├── dropdownmenu.Item                └── dropdownmenu.Item

Basic

A basic dropdown menu with labels and separators.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu") templ DropdownMenuBasic() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Open		}		@dropdownmenu.Content() {			@dropdownmenu.Group() {				@dropdownmenu.Label() {					My Account				}				@dropdownmenu.Item() {					Profile				}				@dropdownmenu.Item() {					Billing				}				@dropdownmenu.Item() {					Settings				}			}			@dropdownmenu.Separator()			@dropdownmenu.Item() {				GitHub			}			@dropdownmenu.Item() {				Support			}			@dropdownmenu.Item(dropdownmenu.ItemProps{Disabled: true}) {				API			}		}	}}

Submenu

Use dropdownmenu.Sub to nest secondary actions.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu") templ DropdownMenuSubmenu() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Open		}		@dropdownmenu.Content() {			@dropdownmenu.Group() {				@dropdownmenu.Item() {					Team				}				@dropdownmenu.Sub() {					@dropdownmenu.SubTrigger() {						Invite users					}					@dropdownmenu.SubContent() {						@dropdownmenu.Item() {							Email						}						@dropdownmenu.Item() {							Message						}						@dropdownmenu.Sub() {							@dropdownmenu.SubTrigger() {								More options							}							@dropdownmenu.SubContent() {								@dropdownmenu.Item() {									Calendly								}								@dropdownmenu.Item() {									Slack								}								@dropdownmenu.Separator()								@dropdownmenu.Item() {									Webhook								}							}						}						@dropdownmenu.Separator()						@dropdownmenu.Item() {							Advanced...						}					}				}				@dropdownmenu.Item() {					New Team					@dropdownmenu.Shortcut() {						⌘+T					}				}			}		}	}}

Shortcuts

Add dropdownmenu.Shortcut to show keyboard hints.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu") templ DropdownMenuShortcuts() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Open		}		@dropdownmenu.Content() {			@dropdownmenu.Group() {				@dropdownmenu.Label() {					My Account				}				@dropdownmenu.Item() {					Profile					@dropdownmenu.Shortcut() {						⇧⌘P					}				}				@dropdownmenu.Item() {					Billing					@dropdownmenu.Shortcut() {						⌘B					}				}				@dropdownmenu.Item() {					Settings					@dropdownmenu.Shortcut() {						⌘S					}				}			}			@dropdownmenu.Separator()			@dropdownmenu.Item() {				Log out				@dropdownmenu.Shortcut() {					⇧⌘Q				}			}		}	}}

Icons

Combine icons with labels for quick scanning.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ DropdownMenuIcons() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Open		}		@dropdownmenu.Content() {			@dropdownmenu.Item() {				@icon.User()				Profile			}			@dropdownmenu.Item() {				@icon.CreditCard()				Billing			}			@dropdownmenu.Item() {				@icon.Settings()				Settings			}			@dropdownmenu.Separator()			@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {				@icon.LogOut()				Log out			}		}	}}

Checkboxes

Use dropdownmenu.CheckboxItem for toggles.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu") templ DropdownMenuCheckboxes() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Open		}		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-40"}) {			@dropdownmenu.Group() {				@dropdownmenu.Label() {					Appearance				}				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {					Status Bar				}				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Disabled: true}) {					Activity Bar				}				@dropdownmenu.CheckboxItem() {					Panel				}			}		}	}}

Checkboxes Icons

Add icons to checkbox items.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ DropdownMenuCheckboxesIcons() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Notifications		}		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-48"}) {			@dropdownmenu.Group() {				@dropdownmenu.Label() {					Notification Preferences				}				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {					@icon.Mail()					Email notifications				}				@dropdownmenu.CheckboxItem() {					@icon.MessageSquare()					SMS notifications				}				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {					@icon.Bell()					Push notifications				}			}		}	}}

Radio Group

Use dropdownmenu.RadioGroup for exclusive choices.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu") templ DropdownMenuRadioGroupExample() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Open		}		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-32"}) {			@dropdownmenu.Group() {				@dropdownmenu.Label() {					Panel Position				}				@dropdownmenu.RadioGroup() {					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "top"}) {						Top					}					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{						Value:   "bottom",						Checked: true,					}) {						Bottom					}					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "right"}) {						Right					}				}			}		}	}}

Radio Icons

Show radio options with icons.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ DropdownMenuRadioIcons() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Payment Method		}		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "min-w-56"}) {			@dropdownmenu.Group() {				@dropdownmenu.Label() {					Select Payment Method				}				@dropdownmenu.RadioGroup() {					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{						Value:   "card",						Checked: true,					}) {						@icon.CreditCard()						Credit Card					}					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "paypal"}) {						@icon.Wallet()						PayPal					}					@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "bank"}) {						@icon.Building2()						Bank Transfer					}				}			}		}	}}

Destructive

Use Variant: dropdownmenu.ItemVariantDestructive for irreversible actions.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ DropdownMenuDestructive() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Actions		}		@dropdownmenu.Content() {			@dropdownmenu.Group() {				@dropdownmenu.Item() {					@icon.Pencil()					Edit				}				@dropdownmenu.Item() {					@icon.Share()					Share				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {					@icon.Trash()					Delete				}			}		}	}}

Avatar

An account switcher dropdown triggered by an avatar.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/avatar"	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ DropdownMenuAvatar() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantGhost,			Size:       button.SizeIcon,			Class:      "rounded-full",			Attributes: dropdownmenu.Trigger(ctx),		}) {			@avatar.Avatar() {				@avatar.Image(avatar.ImageProps{					Src: "https://github.com/axadrn.png",					Alt: "axadrn",				})				@avatar.Fallback() {					AA				}			}		}		@dropdownmenu.Content(dropdownmenu.ContentProps{Align: dropdownmenu.AlignEnd}) {			@dropdownmenu.Group() {				@dropdownmenu.Item() {					@icon.BadgeCheck()					Account				}				@dropdownmenu.Item() {					@icon.CreditCard()					Billing				}				@dropdownmenu.Item() {					@icon.Bell()					Notifications				}			}			@dropdownmenu.Separator()			@dropdownmenu.Item() {				@icon.LogOut()				Sign Out			}		}	}}

Complex

A richer example combining groups, icons, and submenus.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/dropdownmenu"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ DropdownMenuComplex() {	@dropdownmenu.DropdownMenu() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: dropdownmenu.Trigger(ctx),		}) {			Complex Menu		}		@dropdownmenu.Content(dropdownmenu.ContentProps{Class: "w-44"}) {			@dropdownmenu.Group() {				@dropdownmenu.Label() {					File				}				@dropdownmenu.Item() {					@icon.File()					New File					@dropdownmenu.Shortcut() {						⌘N					}				}				@dropdownmenu.Item() {					@icon.Folder()					New Folder					@dropdownmenu.Shortcut() {						⇧⌘N					}				}				@dropdownmenu.Sub() {					@dropdownmenu.SubTrigger() {						@icon.FolderOpen()						Open Recent					}					@dropdownmenu.SubContent() {						@dropdownmenu.Group() {							@dropdownmenu.Label() {								Recent Projects							}							@dropdownmenu.Item() {								@icon.FileCode()								Project Alpha							}							@dropdownmenu.Item() {								@icon.FileCode()								Project Beta							}							@dropdownmenu.Sub() {								@dropdownmenu.SubTrigger() {									@icon.Ellipsis()									More Projects								}								@dropdownmenu.SubContent() {									@dropdownmenu.Item() {										@icon.FileCode()										Project Gamma									}									@dropdownmenu.Item() {										@icon.FileCode()										Project Delta									}								}							}						}						@dropdownmenu.Separator()						@dropdownmenu.Group() {							@dropdownmenu.Item() {								@icon.FolderSearch()								Browse...							}						}					}				}				@dropdownmenu.Separator()				@dropdownmenu.Item() {					@icon.Save()					Save					@dropdownmenu.Shortcut() {						⌘S					}				}				@dropdownmenu.Item() {					@icon.Download()					Export					@dropdownmenu.Shortcut() {						⇧⌘E					}				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Label() {					View				}				@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {					@icon.Eye()					Show Sidebar				}				@dropdownmenu.CheckboxItem() {					@icon.LayoutTemplate()					Show Status Bar				}				@dropdownmenu.Sub() {					@dropdownmenu.SubTrigger() {						@icon.Palette()						Theme					}					@dropdownmenu.SubContent() {						@dropdownmenu.Group() {							@dropdownmenu.Label() {								Appearance							}							@dropdownmenu.RadioGroup() {								@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{									Value:   "light",									Checked: true,								}) {									@icon.Sun()									Light								}								@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "dark"}) {									@icon.Moon()									Dark								}								@dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "system"}) {									@icon.Monitor()									System								}							}						}					}				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Label() {					Account				}				@dropdownmenu.Item() {					@icon.User()					Profile					@dropdownmenu.Shortcut() {						⇧⌘P					}				}				@dropdownmenu.Item() {					@icon.CreditCard()					Billing				}				@dropdownmenu.Sub() {					@dropdownmenu.SubTrigger() {						@icon.Settings()						Settings					}					@dropdownmenu.SubContent() {						@dropdownmenu.Group() {							@dropdownmenu.Label() {								Preferences							}							@dropdownmenu.Item() {								@icon.Keyboard()								Keyboard Shortcuts							}							@dropdownmenu.Item() {								@icon.Languages()								Language							}							@dropdownmenu.Sub() {								@dropdownmenu.SubTrigger() {									@icon.Bell()									Notifications								}								@dropdownmenu.SubContent() {									@dropdownmenu.Group() {										@dropdownmenu.Label() {											Notification Types										}										@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {											@icon.Bell()											Push Notifications										}										@dropdownmenu.CheckboxItem(dropdownmenu.CheckboxItemProps{Checked: true}) {											@icon.Mail()											Email Notifications										}									}								}							}						}						@dropdownmenu.Separator()						@dropdownmenu.Group() {							@dropdownmenu.Item() {								@icon.Shield()								Privacy & Security							}						}					}				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Item() {					@icon.CircleQuestionMark()					Help & Support				}				@dropdownmenu.Item() {					@icon.FileText()					Documentation				}			}			@dropdownmenu.Separator()			@dropdownmenu.Group() {				@dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) {					@icon.LogOut()					Sign Out					@dropdownmenu.Shortcut() {						⇧⌘Q					}				}			}		}	}}

API Reference

Content

The dropdownmenu.Content component is the menu surface, anchored to the trigger.

Prop	Type	Default
`Side`	`SideTop \| SideRight \| SideBottom \| SideLeft`	`SideBottom`
`Align`	`AlignStart \| AlignCenter \| AlignEnd`	`AlignStart`
`SideOffset`	`int`	`4`
`AlignOffset`	`int`	`0`
`Class`	`string`	-

Item

The dropdownmenu.Item component is a selectable entry. It renders as a link when Href is set and closes the menu on click.

Prop	Type	Default
`Variant`	`ItemVariantDefault \| ItemVariantDestructive`	`ItemVariantDefault`
`Inset`	`bool`	`false`
`Disabled`	`bool`	`false`
`Href`	`string`	-
`Target`	`string`	-
`DisableCloseOnClick`	`bool`	`false`
`Class`	`string`	-

CheckboxItem

The dropdownmenu.CheckboxItem component is a toggleable item with a check indicator. It keeps the menu open on click.

Prop	Type	Default
`Checked`	`bool`	`false`
`Disabled`	`bool`	`false`
`Class`	`string`	-

RadioGroup

The dropdownmenu.RadioGroup component wraps radio items and enforces single selection among them.

Prop	Type	Default
`Class`	`string`	-

RadioItem

The dropdownmenu.RadioItem component is a single-select item with a dot indicator. It keeps the menu open on click.

Prop	Type	Default
`Value`	`string`	-
`Checked`	`bool`	`false`
`Disabled`	`bool`	`false`
`Class`	`string`	-

SubTrigger

The dropdownmenu.SubTrigger component opens a nested submenu on hover. Wrap it with dropdownmenu.SubContent in a dropdownmenu.Sub.

Prop	Type	Default
`Inset`	`bool`	`false`
`Class`	`string`	-

Drawer Empty

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.