DropdownMenu
Default DropdownMenu
Loading...
<div class="relative">
<!-- DropdownMenuTrigger(Button Component) -->
<button
class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm text-default-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
Edit
</button>
<!-- DropdownMenuContent -->
<div
class="absolute left-1/2 z-10 mt-2 w-60 -translate-x-1/2 overflow-hidden rounded-md border border-main-border bg-surface p-1 text-surface-text"
role="menu">
<div class="px-3 py-1.5 sm:px-4 sm:py-2">
<p class="text-sm text-main-text">John Doe</p>
<p class="text-xs text-muted-text">@mijnui.com</p>
</div>
<!-- DropdownMenuseparator -->
<div class="-mx-1 my-1 h-px bg-main-border"></div>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
View Warehouse Info
</a>
<!-- DropdownMenuItem/Active -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md bg-primary/20 px-3 py-1.5 text-sm text-primary outline-none transition-colors sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
View on Storefront
</a>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
Duplicate Product
</a>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
Unpublish Product
</a>
</div>
</div>DropdownMenu with Icons
Loading...
<div class="relative">
<!-- DropdownMenuTrigger(Button Component) -->
<button
class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm text-default-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
Edit
</button>
<!-- DropdownMenuContent -->
<div
class="absolute left-1/2 z-10 mt-2 w-60 -translate-x-1/2 rounded-md border border-main-border bg-surface p-1 text-surface-text"
role="menu">
<!-- DropdownMenuItem/Active -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md bg-primary/20 px-3 py-1.5 text-sm text-primary outline-none transition-colors sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.55397 22H3.3999L10.9999 3H12.9999L20.5999 22H18.4458L16.0458 16H7.95397L5.55397 22ZM8.75397 14H15.2458L11.9999 5.88517L8.75397 14Z"></path>
</svg>
View on Storefront
</a>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 32 32"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M 16 4.90625 L 3.625 10.0625 L 3 10.34375 L 3 27 L 29 27 L 29 10.34375 L 28.375 10.0625 Z M 16 7.09375 L 27 11.6875 L 27 25 L 25 25 L 25 14 L 7 14 L 7 25 L 5 25 L 5 11.6875 Z M 9 16 L 23 16 L 23 25 L 9 25 Z"></path>
</svg>
View Warehouse Info
</a>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="21" r="1"></circle>
<circle cx="19" cy="21" r="1"></circle>
<path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
</svg>
Duplicate Product
</a>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0V0z"></path>
<path
d="M1.41 1.13 0 2.54l4.39 4.39 2.21 4.66-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h7.46l1.38 1.38A1.997 1.997 0 0 0 17 22c.67 0 1.26-.33 1.62-.84L21.46 24l1.41-1.41L1.41 1.13zM7 15l1.1-2h2.36l2 2H7zM20 4H7.12l2 2h9.19l-2.76 5h-1.44l1.94 1.94c.54-.14.99-.49 1.25-.97l3.58-6.49C21.25 4.82 20.76 4 20 4zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2z"></path>
</svg>
Unpublish Product
</a>
</div>
</div>DropdownMenu with sub items
Loading...
<div class="relative">
<!-- DropdownMenuTrigger(Button Component) -->
<button
class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm text-default-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
Edit
</button>
<!-- DropdownMenuContent -->
<div
class="absolute left-1/2 z-10 mt-2 w-60 -translate-x-1/2 rounded-md border border-main-border bg-surface p-1 text-surface-text"
role="menu">
<!-- DropdownMenuItem/Active -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md bg-primary/20 px-3 py-1.5 text-sm text-primary outline-none transition-colors sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.55397 22H3.3999L10.9999 3H12.9999L20.5999 22H18.4458L16.0458 16H7.95397L5.55397 22ZM8.75397 14H15.2458L11.9999 5.88517L8.75397 14Z"></path>
</svg>
View on Storefront
</a>
<!-- DropdownMenuSub -->
<div class="relative">
<!-- DropdownMenuSubTrigger -->
<button
class="flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 32 32"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M 16 4.90625 L 3.625 10.0625 L 3 10.34375 L 3 27 L 29 27 L 29 10.34375 L 28.375 10.0625 Z M 16 7.09375 L 27 11.6875 L 27 25 L 25 25 L 25 14 L 7 14 L 7 25 L 5 25 L 5 11.6875 Z M 9 16 L 23 16 L 23 25 L 9 25 Z"></path>
</svg>
<span class="flex-1">View Warehouse Info</span>
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
<!-- DropdownMenuSubContent -->
<div
class="absolute left-0 z-10 w-40 rounded-md border border-main-border bg-surface p-1 text-surface-text sm:left-auto sm:right-0 sm:top-0 sm:translate-x-40"
role="menu">
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
Inventory List
</a>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
Stock Levels
</a>
</div>
</div>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="21" r="1"></circle>
<circle cx="19" cy="21" r="1"></circle>
<path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
</svg>
Duplicate Product
</a>
<!-- DropdownMenuItem -->
<a
href="#"
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
role="menuitem">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0V0z"></path>
<path
d="M1.41 1.13 0 2.54l4.39 4.39 2.21 4.66-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h7.46l1.38 1.38A1.997 1.997 0 0 0 17 22c.67 0 1.26-.33 1.62-.84L21.46 24l1.41-1.41L1.41 1.13zM7 15l1.1-2h2.36l2 2H7zM20 4H7.12l2 2h9.19l-2.76 5h-1.44l1.94 1.94c.54-.14.99-.49 1.25-.97l3.58-6.49C21.25 4.82 20.76 4 20 4zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2z"></path>
</svg>
Unpublish Product
</a>
</div>
</div>DropdownMenu with Checkbox Items
Loading...
<div class="relative">
<!-- DropdownMenuTrigger(Button Component) -->
<button
class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm text-default-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
Edit
</button>
<!-- DropdownMenuContent -->
<div
class="absolute left-1/2 z-10 mt-2 w-60 -translate-x-1/2 overflow-hidden rounded-md border border-main-border bg-surface p-1 text-surface-text"
role="menu">
<div class="px-3 py-1.5 sm:px-4 sm:py-2">
<p class="text-sm font-semibold text-main-text">Appearance</p>
</div>
<!-- DropdownMenuSeparator -->
<div class="-mx-1 my-1 h-px bg-main-border"></div>
<!-- DropdownMenuCheckboxItem/Active -->
<button
role="menuitemcheckbox"
aria-checked="true"
class="relative flex w-full select-none items-center rounded-md bg-primary/20 py-2 pl-4 pr-10 text-sm text-primary outline-none transition-colors disabled:opacity-50">
<!-- DropdownMenuCheckbox -->
<span class="absolute right-4 flex h-3.5 w-3.5 items-center justify-center">
<span data-state="checked">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
class="size-4">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
</span>
Status Bar
</button>
<!-- DropdownMenuCheckboxItem -->
<button
role="menuitemcheckbox"
disabled
class="relative flex w-full select-none items-center rounded-md py-2 pl-4 pr-10 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text disabled:pointer-events-none disabled:opacity-50">
Activity Bar
</button>
<!-- DropdownMenuCheckboxItem -->
<button
role="menuitemcheckbox"
class="relative flex w-full select-none items-center rounded-md py-2 pl-4 pr-10 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text disabled:pointer-events-none disabled:opacity-50">
Panel
</button>
</div>
</div>DropdownMenu with RadioGroup Items
Loading...
<div class="relative">
<!-- DropdownMenuTrigger(Button Component) -->
<button
class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm text-default-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
Open
</button>
<!-- DropdownMenuContent -->
<div
class="absolute left-1/2 z-10 mt-2 w-60 -translate-x-1/2 overflow-hidden rounded-md border border-main-border bg-surface p-1 text-surface-text"
role="menu">
<div class="px-3 py-1.5 sm:px-4 sm:py-2">
<p class="text-sm font-semibold text-main-text">Panel Position</p>
</div>
<!-- DropdownMenuSeparator -->
<div class="-mx-1 my-1 h-px bg-main-border"></div>
<!-- DropdownMenuRadioItems -->
<button
role="menuitemcheckbox"
aria-checked="true"
class="relative flex w-full select-none items-center rounded-md py-2 pl-4 pr-10 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text disabled:opacity-50">
Top
</button>
<!-- DropdownMenuRadioItems/Active -->
<button
role="menuitemcheckbox"
aria-checked="true"
class="relative flex w-full select-none items-center rounded-md bg-primary/20 py-2 pl-4 pr-10 text-sm text-primary outline-none transition-colors disabled:opacity-50">
<span class="absolute right-4 flex h-3.5 w-3.5 items-center justify-center">
<span class="inline-flex items-center">
<label class="relative flex cursor-pointer items-center rounded-full p-0" for="radio-button-example">
<input
type="radio"
class="before:content[''] peer relative h-3.5 w-3.5 cursor-pointer appearance-none rounded-full border border-main-text text-primary transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity checked:border-primary checked:before:bg-primary hover:before:opacity-0"
id="radio-button-example"
name="example"
checked />
<span
class="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-primary opacity-0 transition-opacity peer-checked:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-2 w-2" viewBox="0 0 16 16" fill="currentColor">
<circle data-name="ellipse" cx="8" cy="8" r="8"></circle>
</svg>
</span>
</label>
</span>
</span>
Bottom
</button>
<!-- DropdownMenuRadioItems -->
<button
role="menuitemcheckbox"
aria-checked="true"
class="relative flex w-full select-none items-center rounded-md py-2 pl-4 pr-10 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text disabled:opacity-50">
Right
</button>
</div>
</div>DropdownMenu Structure
<!-- DropdownMenu -->
<div class="relative"></div>
<!-- DropdownMenuTrigger(Button Component) -->
<button
class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm text-default-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
DropdownMenuTrigger
</button>
<!-- DropdownMenuContent -->
<div
class="absolute left-1/2 z-10 mt-2 w-60 -translate-x-1/2 overflow-hidden rounded-md border border-main-border bg-surface p-1 text-surface-text"></div>
<!-- DropdownMenuSub -->
<div class="relative"></div>
<!-- DropdownMenuSubTrigger -->
<button
class="flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0">
<span class="flex-1">DropdownMenuSubTrigger</span>
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
<!-- DropdownMenuSubContent -->
<div
class="absolute left-0 z-10 w-40 rounded-md border border-main-border bg-surface p-1 text-surface-text sm:left-auto sm:right-0 sm:top-0 sm:translate-x-40"></div>
<!-- DropdownMenuSeparator -->
<div class="-mx-1 my-1 h-px bg-main-border"></div>
<!-- DropdownMenuItem -->
<a
class="relative flex select-none items-center gap-2 rounded-md px-3 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0">
DropdownMenuItem
</a>
<!-- DropdownMenuItem/Active -->
<a
class="relative flex select-none items-center gap-2 rounded-md bg-primary/20 px-3 py-1.5 text-sm text-primary outline-none transition-colors sm:px-4 sm:py-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0">
DropdownMenuItem/Active
</a>
<!-- DropdownMenuCheckboxItem -->
<button
class="relative flex w-full select-none items-center rounded-md py-2 pl-4 pr-10 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text disabled:pointer-events-none disabled:opacity-50"></button>
<!-- DropdownMenuCheckboxItem/Active -->
<button
role="menuitemcheckbox"
aria-checked="true"
class="relative flex w-full select-none items-center rounded-md bg-primary/20 py-2 pl-4 pr-10 text-sm text-primary outline-none transition-colors disabled:opacity-50">
<!-- DropdownMenuCheckbox -->
<span class="absolute right-4 flex h-3.5 w-3.5 items-center justify-center">
<span data-state="checked">
<svg
stroke="currentColor"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
class="size-4">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</span>
</span>
DropdownMenuCheckboxItem/Active
</button>
<!-- DropdownMenuRadioItem -->
<button
class="relative flex w-full select-none items-center rounded-md py-2 pl-4 pr-10 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-text disabled:opacity-50">
DropdownMenuRadioItem
</button>
<!-- DropdownMenuRadioItems/Active -->
<button
class="relative flex w-full select-none items-center rounded-md bg-primary/20 py-2 pl-4 pr-10 text-sm text-primary outline-none transition-colors disabled:opacity-50">
<span class="absolute right-4 flex h-3.5 w-3.5 items-center justify-center">
<span class="inline-flex items-center">
<label class="relative flex cursor-pointer items-center rounded-full p-0" for="radio-button-example">
<input
type="radio"
class="before:content[''] peer relative h-3.5 w-3.5 cursor-pointer appearance-none rounded-full border border-main-text text-primary transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity checked:border-primary checked:before:bg-primary hover:before:opacity-0"
id="radio-button-example"
name="example"
checked />
<span
class="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-primary opacity-0 transition-opacity peer-checked:opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-2 w-2" viewBox="0 0 16 16" fill="currentColor">
<circle data-name="ellipse" cx="8" cy="8" r="8"></circle>
</svg>
</span>
</label>
</span>
</span>
DropdownMenuRadioItems/Active
</button>