Dropdown Dropdown menu with new DropdownTrigger, DropdownContent, and DropdownItem subcomponents.
v0.3.0 adds DropdownTrigger, DropdownContent, and DropdownItem subcomponents. DropdownItem automatically closes the menu after clicking. The old Trigger render fragment + IsOpen binding API is still supported.
v0.2.1 v0.3.0 <Trigger> render fragment + IsOpen binding<DropdownTrigger> subcomponent, no external stateManual close on item click DropdownItem auto-closes parent on click
dropdown-trigger, dropdown-content, and dropdown-item are auto-installed as dependencies.
< Dropdown > < DropdownTrigger > < Button Variant = "ButtonVariant.Outline" >Options</ Button > </ DropdownTrigger > < DropdownContent > < DropdownItem >Profile</ DropdownItem > < DropdownItem >Settings</ DropdownItem > < Separator /> < DropdownItem >< span class = "text-destructive" >Log out</ span ></ DropdownItem > </ DropdownContent > </ Dropdown > < Dropdown > < DropdownTrigger >Actions</ DropdownTrigger > < DropdownContent > < DropdownItem OnClick = "HandleEdit" >Edit</ DropdownItem > < DropdownItem OnClick = "HandleDuplicate" >Duplicate</ DropdownItem > < Separator /> < DropdownItem OnClick = "HandleDelete" Class = "text-destructive" >Delete</ DropdownItem > </ DropdownContent > </ Dropdown > @code { private void HandleEdit () { } private void HandleDuplicate () { } private void HandleDelete () { } } < Dropdown > < DropdownTrigger > < Button Variant = "ButtonVariant.Ghost" Class = "flex items-center gap-2" > < Avatar Fallback = "JD" Size = "AvatarSize.Sm" /> John Doe </ Button > </ DropdownTrigger > < DropdownContent > < DropdownItem >My profile</ DropdownItem > < DropdownItem >Billing</ DropdownItem > < DropdownItem >Team settings</ DropdownItem > < Separator /> < DropdownItem >< span class = "text-destructive" >Sign out</ span ></ DropdownItem > </ DropdownContent > </ Dropdown > < Dropdown > < DropdownTrigger >Menu</ DropdownTrigger > < DropdownContent > < DropdownItem >Available</ DropdownItem > < DropdownItem Disabled = "true" >Unavailable</ DropdownItem > </ DropdownContent > </ Dropdown > The v0.2.x <Trigger> + <ChildContent> pattern with external @bind-IsOpen still works:
< Dropdown @bind-IsOpen = "isOpen" > < Trigger > < span >Open Menu</ span > </ Trigger > < ChildContent > < button class = "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent" > Profile </ button > < button class = "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent" > Settings </ button > </ ChildContent > </ Dropdown > @code { private bool isOpen = false ; } Parameter Type Default Description ChildContentRenderFragment— DropdownTrigger + DropdownContent
Parameter Type Default Description ChildContentRenderFragment— Trigger button content
Parameter Type Default Description ChildContentRenderFragment— DropdownItem list
Parameter Type Default Description ChildContentRenderFragment— Item label DisabledboolfalsePrevents selection OnClickEventCallback— Callback — menu closes automatically after firing Classstring?nullAdditional CSS classes
