Dropdown Menu

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

This component could use some work

While this component does make use of the new popover browser API, proper positioning is still not widely supported. There are hacks in place to try to work around this issue while still taking advantage of the rest of the API. Until this is implemented (hopefully soon - Aug 03, 2025) that puts this component in only a 'Good Enough' state. More Info

use leptos::prelude::*;
use singlestage::{dropdown::*, icon};

#[component]
pub fn DropdownMenuExample() -> impl IntoView {
    view! {
        <DropdownMenu>
            <DropdownMenuTrigger variant="outline">"Open"</DropdownMenuTrigger>
            <DropdownMenuContent>
                <DropdownMenuGroup>
                    <DropdownMenuLabel>"My Account"</DropdownMenuLabel>
                    <DropdownMenuItem>
                        "Profile" <DropdownMenuShortcut>"⇧⌘P"</DropdownMenuShortcut>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                        "Billing" <DropdownMenuShortcut>"⌘B"</DropdownMenuShortcut>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                        "Settings" <DropdownMenuShortcut>"⌘S"</DropdownMenuShortcut>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                        "Keyboard shortcuts" <DropdownMenuShortcut>"⌘K"</DropdownMenuShortcut>
                    </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                    <DropdownMenuItem>"GitHub"</DropdownMenuItem>
                    <DropdownMenuItem>"Support"</DropdownMenuItem>
                    <DropdownMenuItem disabled=true>"API"</DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                    <DropdownMenuItem variant="destructive">
                        {icon!(icondata::LuTrash2)} "Delete Account"
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                        {icon!(icondata::LuLogOut)} "Logout"
                        <DropdownMenuShortcut>"⇧⌘Q"</DropdownMenuShortcut>
                    </DropdownMenuItem>
                </DropdownMenuGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    }
}

Anatomy

Import all parts and piece them together.

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

#[component]
pub fn DropdownMenuAnatomy() -> impl IntoView {
    view! {
        <DropdownMenu>
            <DropdownMenuTrigger />
            <DropdownMenuContent>
                <DropdownMenuGroup>
                    <DropdownMenuLabel />
                    <DropdownMenuItem>
                        <DropdownMenuShortcut />
                    </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
            </DropdownMenuContent>
        </DropdownMenu>
    }
}

API Reference

DropdownMenu

Contains all the parts of a dropdown menu.

Implements global attributes.

DropdownMenuContent

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

Implements global attributes.

DropdownMenuGroup

Contains multiple items.

Implements global attributes.

DropdownMenuItem

Contains a menu item.

Custom Attributes
Name	Type	Default	Description
disabled	bool	false	Controls whether the item appears disabled or not.

Implements global and li attributes.

DropdownMenuLabel

Labels groups.

Implements global attributes.

DropdownMenuSeparator

Visually separates groups of menu items.

Implements global attributes.

DropdownMenuShortcut

Displays next to the item content and indicates keyboard shortcuts.

Implements global attributes.

DropdownMenuTrigger

The button that toggles the dropdown menu.

Custom Attributes
Name	Type	Default	Description
button_type	String	"submit"	Renamed <button> `type` attribute to avoid name collisions.
size	String	""	Specify the size to render the button.
variant	String	"primary"	Specify the style of button to render.

Implements global and button attributes.