# Dropdown menu: Safe area

> Moving diagonally from a submenu trigger toward its submenu crosses sibling triggers. The safe area keeps the submenu open while the pointer heads into it. Turn on `showSafeArea` to see it live: the dot turns green inside the area and red where the submenu would switch.

Example: https://hextaui.com/docs/dropdown-menu/examples/safe-area
Component docs: https://hextaui.com/docs/dropdown-menu.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/dropdown-menu-safe-area.json
```

This adds `components/examples/dropdown-menu/safe-area.tsx` with the Dropdown menu component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/dropdown-menu/safe-area.tsx"
"use client"

import * as React from "react"
import { IconDots } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const folders = [
  "Inbox",
  "Design",
  "Engineering",
  "Marketing",
  "Finance",
  "Legal",
  "Archive",
  "Shared with me",
]

const submenus = [
  { label: "Move to", items: folders },
  { label: "Copy to", items: folders },
  { label: "Share", items: ["Copy link", "Email", "Slack"] },
  { label: "Export as", items: ["PDF", "PNG", "SVG"] },
]

export function DropdownMenuSafeArea() {
  const [showSafeArea, setShowSafeArea] = React.useState(true)

  return (
    <div className="flex flex-col items-center gap-6">
      <label className="flex items-center gap-3 text-sm">
        <Checkbox
          checked={showSafeArea}
          onCheckedChange={(checked) => setShowSafeArea(checked === true)}
        />
        Show safe area
      </label>
      <DropdownMenu showSafeArea={showSafeArea}>
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          <IconDots data-icon="inline-start" />
          Q3 report.pdf
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-44">
          {submenus.map((submenu) => (
            <DropdownMenuSub key={submenu.label}>
              <DropdownMenuSubTrigger>{submenu.label}</DropdownMenuSubTrigger>
              <DropdownMenuSubContent className="w-44">
                {submenu.items.map((item) => (
                  <DropdownMenuItem key={item}>{item}</DropdownMenuItem>
                ))}
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          ))}
          <DropdownMenuSeparator />
          <DropdownMenuItem>Rename</DropdownMenuItem>
          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}
```

## Props in this example

### DropdownMenu

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showSafeArea` | `boolean` | `false` | Draws the submenu safe area while the menu is open. For debugging and demos. |

### DropdownMenuTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### DropdownMenuItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "destructive"` | `"default"` |  |

## More Dropdown menu examples

- [Checkboxes](https://hextaui.com/docs/dropdown-menu/examples/checkboxes.md)
- [Radio group](https://hextaui.com/docs/dropdown-menu/examples/radio-group.md)
- [Check on the right](https://hextaui.com/docs/dropdown-menu/examples/indicator-end.md)
- [Select-like](https://hextaui.com/docs/dropdown-menu/examples/select.md)
- [Row actions](https://hextaui.com/docs/dropdown-menu/examples/row-actions.md)
- [Controlled](https://hextaui.com/docs/dropdown-menu/examples/controlled.md)
- [Open on hover](https://hextaui.com/docs/dropdown-menu/examples/hover.md)
- [Disabled](https://hextaui.com/docs/dropdown-menu/examples/disabled.md)
- [Long content](https://hextaui.com/docs/dropdown-menu/examples/long-content.md)
- [Scrolling](https://hextaui.com/docs/dropdown-menu/examples/scrolling.md)
- [Inside a sheet](https://hextaui.com/docs/dropdown-menu/examples/in-sheet.md)
- [Right to left](https://hextaui.com/docs/dropdown-menu/examples/rtl.md)