# DropdownMenuSubContent

> `DropdownMenuSubContent` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`.

Source: https://ui.jcsoftdev.com/docs/components/dropdown-menu-sub-content

`DropdownMenuSubContent` is part of the Overlays set, imported from `@jcsoftdev/ui/overlays`.

## Import

```ts
import { DropdownMenuSubContent } from "@jcsoftdev/ui/overlays";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/overlays/dropdown-menu`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary">Acciones de la cita</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent {...args}>
        <DropdownMenuLabel>Luis Ramírez · 11:30</DropdownMenuLabel>
        <DropdownMenuItem>Reprogramar</DropdownMenuItem>
        <DropdownMenuItem>Cobrar S/ 45</DropdownMenuItem>
        <DropdownMenuItem disabled>Enviar recordatorio</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem className="text-danger">Anular cita</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `container` | `HTMLElement \| null` |  |  |
| `forceMount` | `boolean` |  |  |
| `side` | `"top" \| "bottom" \| "left" \| "right"` |  |  |
| `align` | `"center" \| "end" \| "start"` |  |  |
| `sideOffset` | `number` |  | Gap between the anchor and the content, in px. |
| `alignOffset` | `number` |  | Shift along the edge, in px. Follows the reading direction for `start`/`end`. |
| `collisionPadding` | `Padding` | `8` | Distance kept from the boundary edges. |
| `collisionBoundary` | `Element \| (Element \| null)[] \| null` |  | Element(s) the content must stay inside, intersected with the viewport. Keep the reference stable. |
| `avoidCollisions` | `boolean` |  | Flip and shift to avoid the boundary. Defaults to true. |
| `sticky` | `"always" \| "partial"` |  | `partial` keeps the content touching the anchor while shifting. Defaults to `partial`. |
| `hideWhenDetached` | `boolean` |  | Hide the content while the anchor is scrolled out of the boundary. |
| `arrowPadding` | `number` |  | Minimum distance between the arrow and the content corners. |
| `dir` | `"ltr" \| "rtl"` |  | Reading direction; read from the anchor element when omitted. |
| `onOpenAutoFocus` | `((event: Event) => void)` |  |  |
| `onCloseAutoFocus` | `((event: Event) => void)` |  |  |
| `onEscapeKeyDown` | `((event: KeyboardEvent) => void)` |  |  |
| `onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)` |  |  |
| `onFocusOutside` | `((event: FocusOutsideEvent) => void)` |  |  |
| `onInteractOutside` | `((event: InteractOutsideEvent) => void)` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/overlays-dropdownmenu--default)
- [Open By Default](/storybook/?path=/story/overlays-dropdownmenu--open-by-default)
- [Radio Filter](/storybook/?path=/story/overlays-dropdownmenu--radio-filter)
- [Custom User Menu](/storybook/?path=/story/overlays-dropdownmenu--custom-user-menu)

## Source

`packages/ui/src/overlays/dropdown-menu/dropdown-menu.tsx`