Pikas UI

@pikas-ui/dropdown-menu

This package contains a dropdown menu component that can be used to create a menu that opens when a user clicks on a trigger element.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/dropdown-menu

yarn add @pikas-ui/dropdown-menu

pnpm add @pikas-ui/dropdown-menu

Usage

DropdownMenu

The component is used to create a menu that opens when a user clicks on a trigger element.

import { DropdownMenu } from '@pikas-ui/dropdown-menu';

const Example: React.FC = () => {
  return (
    <DropdownMenu
      data={[
        {
          label: 'Item 1',
          items: [
            {
              label: 'Item 1-1',
              type: 'item',
              onClick: console.log,
            },
            {
              type: 'checkbox',
              checked: true,
              label: 'Item 1-2',
              onCheckedChange: console.log,
              colorName: 'primary',
            },
            {
              type: 'radio',
              onValueChange: console.log,
              value: '1',
              radios: [
                {
                  label: 'Item 1-3-1',
                  value: '1',
                },
                {
                  label: 'Item 1-3-2',
                  value: '2',
                },
              ],
            },
            {
              type: 'menu',
              label: 'Item 1-4',
              data: [
                {
                  label: 'Item 1-4-1',
                  items: [
                    {
                      label: 'Item 1-4-1-1',
                      type: 'item',
                      onClick: console.log,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ]}
    />
  );
};

Props

Prop	Description	Type	Default
`data`	Menu data	`MenuData`	-
`css`	CSS of dropdown menu	`DropdownMenuCSS`	-
`triggerContent`	The content of the trigger	`ReactNode`	-
`iconColorName`	Icon color of trigger content	`PikasColors`	-
`iconSize`	Icon size of trigger content	`number`	24
`direction`	The direction of the menu	`DropdownMenuDirection`	-
`modal`	The modality of the context menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. This prop is ignored within submenus.	`boolean`	`false`
`defaultOpen`	The default open state of the menu	`boolean`	`false`
`open`	The open state of the menu	`boolean`	-
`onOpenChange`	Event handler called when the open state of the context menu changes.	`(open: boolean) => void`	-
`loop`	When true, keyboard navigation will loop from last item to first, and vice versa.	`boolean`	`false`
`onCloseAutoFocus`	Event handler called when focus moves back after closing. It can be prevented by calling event.preventDefault. This prop is ignored within submenus.	`(event: Event) => void`	-
`onEscapeKeyDown`	Event handler called when the escape key is down. It can be prevented by calling event.	`(event: KeyboardEvent) => void`	-
`onPointerDownOutside`	Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.	`() => void`	-
`onFocusOutside`	Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.	`() => void`	-
`onInteractOutside`	Event handler called when focus moves outside the bounds of the component. It can be prevented by calling event.preventDefault.	`() => void`	-
`side`	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled. This prop is ignored within submenus.	`DropdownMenuSide`	`true`
`sideOffset`	The horizontal distance in pixels from the anchor. This only applies within submenus.	`number`	-
`align`	The preferred alignment against the trigger. May change when collisions occur. This prop is ignored within submenus.	`DropdownMenuAlign`	-
`alignOffset`	The vertical distance in pixels from the anchor.	`number`	-
`avoidCollisions`	When true, overrides the side andalign preferences to prevent collisions with window edges.	`boolean`	`false`
`collisionPadding`	The distance in pixels from window edges where collision detection should occur.	`number`	-
`disabled`	When true, the menu will be disabled.	`boolean`	`false`

Contributing

This documentation can be edited on GitHub here