DropdownMenuSubContent

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

Import

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

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

Usage

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
• Open By Default
• Radio Filter
• Custom User Menu

Source

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