Dropdown

Implementation#

Dropdown components can be used either via dot-notation (Dropdown.Menu) or using the components directly (DropdownMenu).

import { Dropdown, Button } from "slipstream-ui";

const Example = () => (
  <Dropdown>
    <Dropdown.Toggle tag={Button}>Click Me</Dropdown.Toggle>
    <Dropdown.Menu>
      <Dropdown.Item>Get Started</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
);

Default#

Example

<Dropdown>...</Dropdown>

Menu Start/End#

Example

<Dropdown right="end">...</Dropdown>

Direction#

Example

<Dropdown direction="top">...</Dropdown>

Offset#

Example

<Dropdown offset="8">...</Dropdown>

Icon#

Example

<Dropdown icon right="end">
  ...
</Dropdown>

Right-To-Left (rtl)#

Example

<Dropdown icon rtl>
  ...
</Dropdown>

Props#

Attribute	Type	Value	Default Value	Description
isOpen	boolean			Control internal isOpen boolean manually
onClick	function			Send onClick callback when user clicks outside menu
disableOutsideClick	boolean			Prevent outside click from closing menu
direction	string	top/right/bottom/left	bottom	Direction dropdown should appear around button
right	string	end	start	Direction menu should appear with set direction prop
offset	string		4	Distance from button menu should appear
icon	boolean	true/false	undefined	Set Chevron Icon on Dropdown Toggle
rtl	boolean	true/false	undefined	Set Dropdown Toggle to right-to-left