@commercetools-uikit/dropdown-menu v19.2.0

DropdownMenu

Description

This component should be used whenever you need to display a floating panel after clicking on an element.

It allows to use any component as the element used to trigger the floating panel.

The panel can be customized to render whatever is needed. However, as a common use case would be to render a list of elements and select one of them, this component provides some helpers to easily implement such use case.

Something to bear in mind is that, when the panel is open, the document scroll is blocked.

Installation

yarn add @commercetools-uikit/dropdown-menu

npm --save install @commercetools-uikit/dropdown-menu

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import CheckboxInput from '@commercetools-uikit/checkbox-input';
import DropdownMenu from '@commercetools-uikit/dropdown-menu';
import IconButton from '@commercetools-uikit/icon-button';
import SecondaryButton from '@commercetools-uikit/secondary-button';
import SpacingsStack from '@commercetools-uikit/spacings-stack';
import Text from '@commercetools-uikit/text';
import { ColumnsIcon, FilterIcon } from '@commercetools-uikit/icons';

export const ListDropdownExample = () => {
  return (
    <DropdownMenu
      triggerElement={<IconButton icon={<ColumnsIcon />} label="list" />}
      menuHorizontalConstraint={6}
      menuPosition="left"
      menuType="list"
    >
      <DropdownMenu.ListMenuItem onClick={() => {}}>
        Option 1
      </DropdownMenu.ListMenuItem>
      <DropdownMenu.ListMenuItem onClick={() => {}} isDisabled>
        Option 2
      </DropdownMenu.ListMenuItem>
      <DropdownMenu.ListMenuItem onClick={() => {}}>
        Option 3
      </DropdownMenu.ListMenuItem>
    </DropdownMenu>
  );
};

export const CustomDropdownExample = () => {
  return (
    <DropdownMenu
      triggerElement={
        <SecondaryButton label="Filters" iconLeft={<FilterIcon />} />
      }
      menuHorizontalConstraint={6}
      menuPosition="right"
    >
      <SpacingsStack scale="m">
        <Text.Body>Store</Text.Body>
        <CheckboxInput isChecked value="store" onChange={(event) => {}}>
          Canada (FR)
        </CheckboxInput>
      </SpacingsStack>
    </DropdownMenu>
  );
};

Properties

Additional info

ListMenuItem

When using the list floating panel, the DropdownMenu component exposes an inner sub-component called DropdownMenu.ListMenuItem that should be used to render each item in the list.

Clicking on an item will close the panel and call the onClick callback with the item's value.

Properties