export const title = "Context menu components"
export const description = "Free and open-source React context menu components built for modern applications and websites. Trigger these menus with a right-click, long-press, or the keyboard menu key, 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/Menu.html#context-menus"
}

import { DropdownContextMenuSimple } from "@/components/base/dropdown/dropdown-context-menu-simple.tsx";
import { DropdownContextMenuAdvanced } from "@/components/base/dropdown/dropdown-context-menu-advanced.tsx";

<PreviewAndCode title="Context menu 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">
        <DropdownContextMenuSimple />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownContextMenuSimpleStory" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

Context menus reuse the same `Dropdown` component as our dropdown menus — only the trigger changes. You can add it 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 context menu components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Context menu examples

Below are examples and variations of this context menu component. Right-click (or long-press on touch) the highlighted area to open the menu.

### Simple {{ tocOnly:true }}

<PreviewAndCode title="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">
        <DropdownContextMenuSimple />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownContextMenuSimpleStory" />
    </TabPanel>
</PreviewAndCode>

### Advanced {{ tocOnly:true }}

<PreviewAndCode title="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">
        <DropdownContextMenuAdvanced />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="max-h-[600px]" component="dropdown/DropdownContextMenuAdvancedStory" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "How do I turn a dropdown into a context menu?",
            answer: "Set the `trigger` prop to `\"contextMenu\"` on `Dropdown.Root`. The first child becomes the target area that opens the menu on right-click (or long-press on touch devices), and the menu opens at the pointer position instead of anchored to a button.",
        },
        {
            question: "What can I use as the trigger target?",
            answer: "The target must be a React Aria pressable element, so wrap your content in an `AriaButton` (or `Pressable`) from `react-aria-components`. React Aria attaches the right-click and long-press handlers to it and manages focus and keyboard access for you.",
        },
        {
            question: "Are context menus keyboard accessible?",
            answer: "Yes. Because they are built on React Aria, users can open the menu with the context menu key (or Shift+F10) while the target is focused, navigate items with the arrow keys, select with Enter, and dismiss with Escape.",
        },
        {
            question: "Can context menus have submenus?",
            answer: "Yes. Wrap a `Dropdown.Item` and a nested `Dropdown.Popover` in a `SubmenuTrigger` from `react-aria-components`, exactly as you would in a regular dropdown. See the advanced example above for nested submenus.",
        },
        {
            question: "How do I add checkable options or keyboard shortcuts?",
            answer: "Use `selectionMode=\"multiple\"` (or `\"single\"`) on a `Dropdown.Section` for checkable items, and pass the `addon` prop on a `Dropdown.Item` to show a keyboard shortcut such as `⌘C`.",
        },
    ]}
/>