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

| Props | Type | Required | Default | Description | | -------------------------- | ----------------------------------------------------- | :------: | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | menuPosition | unionPossible values:'left' , 'right' | | 'left' | The position of the menu relative to the trigger element. | | menuMaxHeight | number | | | The maximum height for the menu in pixels. By default, the max height will be the available space between the trigger element and the bottom of the viewport. | | triggerElement | ReactElement | ✅ | | The element that triggers the dropdown. | | menuType | unionPossible values:'default' , 'list' | | 'default' | The type of the menu. The 'default' type just renders a dropdown container but the 'list' type is intended to be used with the DropdownMenu.ListMenuItem component. | | menuHorizontalConstraint | TMaxProp | | 'auto' | The horizontal constraint of the menu. | | children | ReactNode | ✅ | | The content of the dropdown. |

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

| Props | Type | Required | Default | Description | | ------------ | ------------ | :------: | ------- | ------------------------------------------------- | | isDisabled | boolean | | false | Whether the item should be disabled. | | onClick | () => void | | | A callback to be called when the item is clicked. | | children | string | ✅ | | The label for the item. |