DropdownMenuArrow

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

Import

import { DropdownMenuArrow } 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
width	number		Length of the base along the content edge, in px.
height	number		Protrusion from the content edge, in px; it is added to sideOffset.

* 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