Default
Open Menu
<Dropdown>
<DropdownToggle Label="Open Menu" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
Color
Open Menu
Open Menu
Open Menu
<Dropdown>
<DropdownToggle Label="Open Menu" Color="ComponentColor.Primary" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownToggle Label="Open Menu" Color="ComponentColor.Secondary" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownToggle Label="Open Menu" Color="ComponentColor.Tertiary" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
Variant
Open Menu
Open Menu
Open Menu
<Dropdown>
<DropdownToggle Label="Open Menu" Variant="ComponentVariant.Solid" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownToggle Label="Open Menu" Variant="ComponentVariant.Outline" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownToggle Label="Open Menu" Variant="ComponentVariant.Ghost" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
Icon
Open Menu
<Dropdown>
<DropdownToggle Label="Open Menu" />
<DropdownMenu>
<DropdownItem IconLeft="Lucide.User" IconRight="Lucide.ArrowRight">
Action 1
</DropdownItem>
<DropdownItem IconLeft="Lucide.Contact" IconRight="Lucide.ArrowRight">
Action 2
</DropdownItem>
<DropdownItem IconLeft="Lucide.Airplay" IconRight="Lucide.ArrowRight">
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
Size
Open Menu
Open Menu
Open Menu
<Dropdown>
<DropdownToggle Label="Open Menu" Size="ComponentSize.Large" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownToggle Label="Open Menu" Size="ComponentSize.Medium" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownToggle Label="Open Menu" Size="ComponentSize.Small" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
Disabled
Open Menu
<Dropdown>
<DropdownToggle Label="Open Menu" />
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem Disabled>
Action 2
</DropdownItem>
<DropdownItem Disabled>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
Custom Toggle
\<Dropdown>
<DropdownToggle>
<Button Color="ComponentColor.Transparent" ClassName="p-0!">
<Blazicon Svg="Lucide.EllipsisVertical" class="size-4" />
</Button>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>
Callback
Open Menu
Selected :
\<Dropdown>
<DropdownToggle>
<Button Color="ComponentColor.Transparent" ClassName="p-0!">
<Blazicon Svg="Lucide.EllipsisVertical" class="size-4" />
</Button>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
Action 1
</DropdownItem>
<DropdownItem>
Action 2
</DropdownItem>
<DropdownItem>
Action 3
</DropdownItem>
</DropdownMenu>
</Dropdown>