Dropdown MenuAndroid

Anchored menu list with staggered item entrance.

$ npx lumioui add dropdown-menu

import { DropdownMenu } from "@/components/ui/dropdown-menu/dropdown-menu";

Props14

DropdownMenu
children	React.ReactNode
open?	boolean	Controlled open state.
defaultOpen?	boolean	Uncontrolled initial state.
onOpenChange?	(open: boolean) => void
DropdownMenuTrigger
children	React.ReactNode
className?	string
DropdownMenuContent
className?	string
align?	"start" \| "end"	Horizontal alignment relative to the trigger. Default "start".
sideOffset?	number	Extra vertical offset below the trigger. Default 4.
DropdownMenuItem
children	React.ReactNode	Item label.
icon?	React.ReactNode	Optional icon rendered before the label.
destructive?	boolean	Render in destructive style.
className?	string	Extra classes for the row.
DropdownMenuSeparator
className?	string

Dropdown Menuthread.tsx

dropdown-menu/variants/thread.tsx open

Anchored menu list with staggered item entrance.

import { DropdownThread } from "@/components/ui/dropdown-menu/variants/thread";

export function Example() {
  return (
    <DropdownThread />
  );
}

import * as React from "react";
import { View } from "react-native";
import { DropdownMenu } from "../dropdown-menu";
import { Avatar } from "../../avatar/avatar";
import { Icon } from "../../icon/icon";
import { Text } from "../../text/text";
import { Glass } from "../../glass/glass";

/** DropdownThread — anchored actions menu for a chat thread. */
export function DropdownThread() {
  const [open, setOpen] = React.useState(false);
  const [choice, setChoice] = React.useState<string | null>(null);
  return (
    <View className="w-full gap-3">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <DropdownMenu open={open} onOpenChange={setOpen}>
            <DropdownMenu.Trigger className="min-h-[44px]">
              <View className="flex-row items-center gap-3">
                <Avatar size="sm" source={{ uri: "https://i.pravatar.cc/150?img=12" }} fallback="PN" alt="Priya Nair" />
                <View className="flex-1 gap-0.5">
                  <Text variant="small" className="font-semibold">Priya Nair</Text>
                  <Text variant="muted">Active now · 1,204 messages</Text>
                </View>
                <Icon name="chevron-down" size="sm" color="mutedForeground" />
              </View>
            </DropdownMenu.Trigger>
            <DropdownMenu.Content>
              <DropdownMenu.Item
                icon={<Icon name="bell" size="sm" color="mutedForeground" />}
                onPress={() => { setChoice("Muted for 8 hours"); setOpen(false); }}
              >
                Mute for 8 hours
              </DropdownMenu.Item>
              <DropdownMenu.Item
                icon={<Icon name="search" size="sm" color="mutedForeground" />}
                onPress={() => { setChoice("Searching 1,204 messages"); setOpen(false); }}
              >
                Search in conversation
              </DropdownMenu.Item>
              <DropdownMenu.Item
                destructive
                icon={<Icon name="trash" size="sm" color="destructive" />}
                onPress={() => { setChoice("Thread deleted"); setOpen(false); }}
              >
                Delete thread
              </DropdownMenu.Item>
            </DropdownMenu.Content>
          </DropdownMenu>
          <Text variant="muted" className="border-t border-border pt-3">{choice ?? "Starred · notifications on"}</Text>
        </Glass>
      </View>
  );
}