Singlestage UI

v0.5.0

Getting Started

Components

Select base theme

Select color scheme

Toggle dark mode

GitHub repository

Dropdown Menu

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

This component uses newly available browser features

This component uses CSS Anchor Positioning which has only been widely supported since January 2026. If you're targeting older or less mainstream browsers then maybe this component isn't for you, yet.

Alternatively you can use Singlestage 0.4 which positions the component correctly but with limited flexibility for alignment, or roll your own using Singlestage CSS classes for consistent styling.

More Info

Basic

A basic dropdown menu with labels and separators.

Submenu

Use MenuSub to nest secondary actions.

Shortcuts

Add MenuShortcut to show keyboard hints.

Icons

Combine icons with labels for quick scanning.

Checkboxes

Dropdown menus can use Checkboxes.

Checkbox Icons

Icons can be added to checkbox items.

Radio Group

Dropdown menus can use RadioGroups.

Radio Icons

Icons can be added to radio items..

Destructive

Use the destructive variant for irreversible actions.

Avatar

An account switcher dropdown triggered by an avatar.

Complex

A richer example combining groups, icons, and submenus.

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn DropdownMenuAnatomy() -> impl IntoView {
    view! {
        <DropdownMenu>
            <DropdownMenuTrigger>
                <Button />
            </DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuGroup>
                    <DropdownMenuLabel />
                    <DropdownMenuItem>
                        <DropdownMenuShortcut />
                    </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuSub>
                    <DropdownMenuSubTrigger />
                    <DropdownMenuSubContent>
                        <DropdownMenuGroup>
                            <DropdownMenuCheckboxGroup>
                                <DropdownMenuCheckboxItem />
                            </DropdownMenuCheckboxGroup>
                        </DropdownMenuGroup>
                        <DropdownMenuSeparator />
                        <DropdownMenuGroup>
                            <DropdownMenuRadioGroup>
                                <DropdownMenuRadioItem />
                            </DropdownMenuRadioGroup>
                        </DropdownMenuGroup>
                    </DropdownMenuSubContent>
                </DropdownMenuSub>
            </DropdownMenuContent>
        </DropdownMenu>
    }
}

API Reference

DropdownMenu

Contains all the parts of a dropdown menu.

Custom Attributes
NameTypeDefaultDescription
modalboolfalse

Set whether or not this popover should be modal meaning it can't be light dismissed Use this along with the open signal for a manually managed popover

openboolfalse

Reactive signal that can remotely control the open state of the popover **but is not coupled to the actual open state of the popover** unless modal is set to true

Implements global attributes.

DropdownMenuCheckboxGroup

A checkbox group component for dropdown menus.

Custom Attributes
NameTypeDefaultDescription
invalidboolfalse

A reactive signal that toggles whether all the children Checkboxes appear invalid or not.

valueVec<String>[]

A dynamic list of all the values of checked children Checkboxes.

Implements global and fieldset attributes.

DropdownMenuCheckboxItem

A checkbox item for dropdown menus.

Custom Attributes
NameTypeDefaultDescription
checkedboolfalse

A reactive signal coupled to the checkbox's checked value.

disabledboolfalse

Controls whether the item appears disabled or not.

dismissbooltrue

Toggle whether clicking this item dismisses the parent menu.

insetboolfalse

Set whether or not this element should display inset from its normal position.

variantString""

Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.

DropdownMenuContent

The component that pops out when the dropdown menu is open.

Custom Attributes
NameTypeDefaultDescription
alignString"start"

Set how to align the popover. Accepted values: "start" | "center" | "end"

sideString"bottom"

Set which side the popover opens relative to the trigger point. Accepted values: "top" | "right" | "bottom" | "left""

Implements global attributes.

DropdownMenuGroup

Visually groups multiple menu items.

Implements global attributes.

DropdownMenuItem

Contains a dropdown menu item.

Custom Attributes
NameTypeDefaultDescription
as_childboolfalse

This component will render without styling.

disabledboolfalse

Controls whether the item appears disabled and is clickable.

dismissbooltrue

Toggle whether clicking this item dismisses the parent menu.

insetboolfalse

Set whether or not this element should display inset from its normal position.

variantString""

Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.

DropdownMenuLabel

Labels groups of menu items.

Custom Attributes
NameTypeDefaultDescription
disabledboolfalse

Renders the label with disabled styling.

insetboolfalse

Set whether or not this element should display inset from its normal position.

invalidboolfalse

Renders the label with invalid styling.

label_forString""

Use this to explicitly set the id of the labeled element.

Implements global attributes.

DropdownMenuRadioItem

A radio item for dropdown menus.

Custom Attributes
NameTypeDefaultDescription
checkedboolfalse

A reactive signal coupled to the radio's checked value.

disabledboolfalse

Controls whether the item appears disabled or not.

dismissbooltrue

Toggle whether clicking this item dismisses the parent menu.

insetboolfalse

Set whether or not this element should display inset from its normal position.

variantString""

Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.

DropdownMenuRadioGroup

A radio group component for dropdown menus.

Custom Attributes
NameTypeDefaultDescription
defaultString""

Set or update the default value.

invalidboolfalse

Renders the group with invalid styling.

valueString""

A reactive signal coupled to the current selected value of the radio group.

Implements global and fieldset attributes.

DropdownMenuSeparator

Visually separates groups of menu items.

Custom Attributes
NameTypeDefaultDescription
orientationString"horizontal"

Specify the orientation of the separator. Accepted values: "horizontal" | "vertical".

Implements global attributes.

DropdownMenuShortcut

Displays next to the item content and indicates keyboard shortcuts.

Implements global attributes.

DropdownMenuTrigger

A context provider that wraps a button that triggers the dropdown menu.

Implements global attributes.

DropdownMenuSub

Contains all the parts of a sub menu.

Custom Attributes
NameTypeDefaultDescription
openboolfalse

Reactive signal that can remotely control the open state of the popover but is not coupled to the actual state of the popover.

Implements global attributes.

DropdownMenuSubContent

The component that pops out when the sub trigger is triggered.

Custom Attributes
NameTypeDefaultDescription
alignString"start"

Set how to align the popover. Accepted values: "start" | "center" | "end"

sideString"bottom"

Set which side the popover opens relative to the trigger point. Accepted values: "top" | "right" | "bottom" | "left""

Implements global attributes.

DropdownMenuSubTrigger

A dropdown menu item that triggers a sub menu.

Custom Attributes
NameTypeDefaultDescription
disabledboolfalse

Controls whether the item appears disabled or not.

insetboolfalse

Set whether or not this element should display inset from its normal position.

variantString""

Set the display variant of the item. Accepted values: "destructive".

Implements global and li attributes.