Dropdown Menu

Displays a menu of options that can be used for navigation, settings, or actions.

Installation

CLI

Install the component using the StarUI CLI:

star add dropdown-menu

Examples

Checkbox Menu

Menu with toggleable options and live state display

Grid: • Rulers: • Guides: • Auto-save:

Radio Group Menu

Menu with mutually exclusive options

Current theme: system

Context Menu

Rich menu with keyboard shortcuts and grouped actions

User Profile Menu

Complete user menu with avatar, profile info, and account actions

Creation Menu

Grouped menu for creating different types of content

Action:

from starhtml import *
from starui import *

Div(
    (created := Signal("created", "")),
    Div(
        Div(
            Icon("lucide:plus-circle", cls="h-4 w-4 text-muted-foreground"),
            Span("Action: ", cls="text-muted-foreground ml-2 mr-1"),
            Span(data_text=created.or_("No action taken yet"), cls="font-medium italic"),
            cls="flex items-center"
        ),
        cls="p-3 bg-muted/50 rounded-lg border border-border text-sm mb-4"
    ),
    Div(
        DropdownMenu(
            DropdownMenuTrigger(
                "Create New",
                Icon("lucide:chevron-down", cls="ml-2 h-4 w-4"),
                cls="w-36"
            ),
            DropdownMenuContent(
                DropdownMenuGroup(
                    DropdownMenuItem(
                        Icon("lucide:file-text", cls="mr-2 h-4 w-4"),
                        "Document",
                        data_on_click=created.set('Document created')
                    ),
                    DropdownMenuItem(
                        Icon("lucide:table", cls="mr-2 h-4 w-4"),
                        "Spreadsheet",
                        data_on_click=created.set('Spreadsheet created')
                    ),
                    DropdownMenuItem(
                        Icon("lucide:presentation", cls="mr-2 h-4 w-4"),
                        "Presentation",
                        data_on_click=created.set('Presentation created')
                    )
                ),
                DropdownMenuSeparator(),
                DropdownMenuGroup(
                    DropdownMenuItem(
                        Icon("lucide:folder-plus", cls="mr-2 h-4 w-4"),
                        "New Folder",
                        data_on_click=created.set('Folder created')
                    ),
                    DropdownMenuItem(
                        Icon("lucide:upload", cls="mr-2 h-4 w-4"),
                        "Upload File",
                        data_on_click=created.set('File uploaded')
                    )
                )
            )
        ),
        cls="flex justify-center"
    ),
    cls="flex flex-col min-h-[200px] justify-center"
)

Complex Data Controls

Multiple coordinated menus for table/list management

Sort: name () • View: list • Hidden: • Extensions:

from starhtml import *
from starui import *

sort_options = [
    ("name", "Name"),
    ("date", "Date Created"),
    ("size", "Size"),
    ("type", "Type")
]

view_options = [
    ("grid", "Grid View"),
    ("list", "List View")
]

Div(
    (sort_by := Signal("sort_by", "name")),
    (ascending := Signal("ascending", True)),
    (view_mode := Signal("view_mode", "list")),
    (show_hidden := Signal("show_hidden", False)),
    (show_extensions := Signal("show_extensions", True)),
    Div(
        Div(
            Span("Sort: ", cls="text-muted-foreground"),
            Span(data_text=sort_by, cls="font-medium capitalize"),
            Span(" (", cls="text-muted-foreground"),
            Span(data_text=ascending.if_("Ascending", "Descending"), cls="font-medium"),
            Span(")", cls="text-muted-foreground"),
            Span(" • ", cls="text-muted-foreground mx-1"),
            Span("View: ", cls="text-muted-foreground"),
            Span(data_text=view_mode, cls="font-medium capitalize"),
            Span(" • ", cls="text-muted-foreground mx-1"),
            Span("Hidden: ", cls="text-muted-foreground"),
            Span(data_text=show_hidden.if_("On", "Off"), cls="font-medium"),
            Span(" • ", cls="text-muted-foreground mx-1"),
            Span("Extensions: ", cls="text-muted-foreground"),
            Span(data_text=show_extensions.if_("On", "Off"), cls="font-medium"),
            cls="flex items-center flex-wrap gap-1"
        ),
        cls="p-3 bg-muted/50 rounded-lg border border-border text-sm mb-4"
    ),
    Div(
        DropdownMenu(
            DropdownMenuTrigger(
                "Sort By",
                Icon("lucide:chevron-down", cls="ml-2 h-4 w-4"),
                variant="outline",
                cls="w-32"
            ),
            DropdownMenuContent(
                DropdownMenuRadioGroup(
                    *[DropdownMenuRadioItem(label, value=value, signal=sort_by)
                      for value, label in sort_options],
                    signal=sort_by
                ),
                DropdownMenuSeparator(),
                DropdownMenuCheckboxItem("Ascending", signal=ascending),
                align="end"
            )
        ),
        DropdownMenu(
            DropdownMenuTrigger(
                "View",
                Icon("lucide:chevron-down", cls="ml-2 h-4 w-4"),
                variant="outline",
                cls="ml-2 w-28"
            ),
            DropdownMenuContent(
                DropdownMenuCheckboxItem("Show Hidden Files", signal=show_hidden),
                DropdownMenuCheckboxItem("Show File Extensions", signal=show_extensions),
                DropdownMenuSeparator(),
                DropdownMenuRadioGroup(
                    *[DropdownMenuRadioItem(label, value=value, signal=view_mode)
                      for value, label in view_options],
                    signal=view_mode
                ),
                align="start"
            )
        ),
        cls="flex items-center justify-center"
    ),
    cls="flex flex-col min-h-[200px] justify-center"
)

API Reference

Component	Description
`DropdownMenu`	Main container component for dropdown menus with positioning and state management
`DropdownMenuTrigger`	Button or element that opens the dropdown menu when clicked
`DropdownMenuContent`	Container for all dropdown menu items with proper positioning and styling
`DropdownMenuItem`	Individual clickable menu item for actions and navigation
`DropdownMenuCheckboxItem`	Menu item with checkbox state for toggleable options
`DropdownMenuRadioGroup`	Container for radio button menu items with shared state
`DropdownMenuRadioItem`	Menu item with radio button for single selection from group
`DropdownMenuSeparator`	Visual separator line to organize menu sections
`DropdownMenuLabel`	Text label for categorizing and organizing menu items
`DropdownMenuShortcut`	Keyboard shortcut display for menu items
`DropdownMenuGroup`	Logical grouping container for related menu items