export const title = "Dropdown components"
export const description = "Free and open-source React dropdown components built for modern applications and websites. These dropdowns are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/dropdown",
    rac: "https://react-spectrum.adobe.com/react-aria/Popover.html"
}

import { DropdownButtonSimple } from "@/components/base/dropdown/dropdown-button-simple.tsx";
import { DropdownButtonAdvanced } from "@/components/base/dropdown/dropdown-button-advanced.tsx";
import { DropdownButtonLink } from "@/components/base/dropdown/dropdown-button-link.tsx";
import { DropdownIconSimple } from "@/components/base/dropdown/dropdown-icon-simple.tsx";
import { DropdownIconAdvanced } from "@/components/base/dropdown/dropdown-icon-advanced.tsx";
import { DropdownSearchSimple } from "@/components/base/dropdown/dropdown-search-simple.tsx";
import { DropdownSearchAdvanced } from "@/components/base/dropdown/dropdown-search-advanced.tsx";
import { DropdownIntegration } from "@/components/base/dropdown/dropdown-integration.tsx";
import { DropdownAccountButton } from "@/components/base/dropdown/dropdown-account-button.tsx";
import { DropdownAvatar } from "@/components/base/dropdown/dropdown-avatar.tsx";
import { DropdownAccountCardXS } from "@/components/base/dropdown/dropdown-account-card-xs.tsx";
import { DropdownAccountCardSM } from "@/components/base/dropdown/dropdown-account-card-sm.tsx";
import { DropdownAccountCardMD } from "@/components/base/dropdown/dropdown-account-card-md.tsx";
import { DropdownAccountBreadcrumb } from "@/components/base/dropdown/dropdown-account-breadcrumb.tsx";

<PreviewAndCode title="Dropdown example">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownButtonSimple />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownButtonSimpleStory" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this dropdown component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add dropdown
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/dropdown" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the dropdown components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Dropdown examples

Below are examples and variations of this dropdown component:

### Button simple {{ tocOnly:true }}

<PreviewAndCode title="Button simple">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownButtonSimple />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownButtonSimpleStory" />
    </TabPanel>
</PreviewAndCode>

### Button advanced {{ tocOnly:true }}

<PreviewAndCode title="Button advanced">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownButtonAdvanced />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownButtonAdvancedStory" />
    </TabPanel>
</PreviewAndCode>

### Button link {{ tocOnly:true }}

<PreviewAndCode title="Button link">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownButtonLink />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownButtonLinkStory" />
    </TabPanel>
</PreviewAndCode>

### Icon simple {{ tocOnly:true }}

<PreviewAndCode title="Icon simple">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownIconSimple />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownIconSimpleStory" />
    </TabPanel>
</PreviewAndCode>

### Icon advanced {{ tocOnly:true }}

<PreviewAndCode title="Icon advanced">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownIconAdvanced />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownIconAdvancedStory" />
    </TabPanel>
</PreviewAndCode>

### Search simple {{ tocOnly:true }}

<PreviewAndCode title="Search simple">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownSearchSimple />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownSearchSimpleStory" />
    </TabPanel>
</PreviewAndCode>

### Search advanced {{ tocOnly:true }}

<PreviewAndCode title="Search advanced">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownSearchAdvanced />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownSearchAdvancedStory" />
    </TabPanel>
</PreviewAndCode>

### Integrations {{ tocOnly:true }}

<PreviewAndCode title="Integrations">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownIntegration />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownIntegrationStory" />
    </TabPanel>
</PreviewAndCode>

### Account button {{ tocOnly:true }}

<PreviewAndCode title="Account button">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownAccountButton />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownAccountButtonStory" />
    </TabPanel>
</PreviewAndCode>

### Avatar {{ tocOnly:true }}

<PreviewAndCode title="Avatar">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownAvatar />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownAvatarStory" />
    </TabPanel>
</PreviewAndCode>

### Account card (xs) {{ tocOnly:true }}

<PreviewAndCode title="Account card (xs)">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownAccountCardXS />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownAccountCardXSStory" />
    </TabPanel>
</PreviewAndCode>

### Account card (sm) {{ tocOnly:true }}

<PreviewAndCode title="Account card (sm)">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownAccountCardSM />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownAccountCardSMStory" />
    </TabPanel>
</PreviewAndCode>

### Account card (md) {{ tocOnly:true }}

<PreviewAndCode title="Account card (md)">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownAccountCardMD />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownAccountCardMDStory" />
    </TabPanel>
</PreviewAndCode>

### Account breadcrumb {{ tocOnly:true }}

<PreviewAndCode title="Account breadcrumb">
    <ResizablePreview id="preview" className="flex py-32 min-h-[320px] items-center justify-center rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <DropdownAccountBreadcrumb />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownAccountBreadcrumbStory" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I position dropdowns relative to their trigger?",
            answer: "You can control the position of dropdowns using the `placement` prop on the `Dropdown.Popover` component. It accepts values like `\"top\"`, `\"bottom\"`, `\"left\"`, `\"right\"`, and their variations (e.g., `\"top start\"`, `\"bottom right\"`). The default placement is `\"bottom right\"`.",
        },
        {
            question: "Can I customize the appearance of dropdown items?",
            answer: "Yes, you can customize dropdown items using the `className` prop on `Dropdown.Item` components. You can also add icons using the `icon` prop, display addons (like keyboard shortcuts) with the `addon` prop, or create completely unstyled items using the `unstyled` prop.",
        },
        {
            question: "How do I handle selection in dropdowns?",
            answer: "You can handle selection by using the `onSelectionChange` prop on the `Dropdown.Menu` component, which provides a callback function that receives the selected key. The dropdown uses single selection mode by default and disallows empty selection.",
        },
        {
            question: "How do I organize dropdown items into sections?",
            answer: "You can organize dropdown items using `Dropdown.Section` components and separate them with `Dropdown.Separator`. You can also add section headers using `Dropdown.SectionHeader` to create well-organized dropdown menus.",
        },
        {
            question: "How do I make dropdowns accessible?",
            answer: "The dropdown component is built with accessibility in mind using React Aria. It supports keyboard navigation (arrow keys to navigate, Enter to select, Escape to close), proper ARIA attributes, focus management, and screen reader compatibility.",
        },
        {
            question: "Can I disable individual dropdown items?",
            answer: "Yes, you can disable individual dropdown items by setting the `isDisabled` prop to `true` on the `Dropdown.Item` component. Disabled items will have a different visual appearance and won't respond to user interactions.",
        },
    ]}
/>