Skip to main content

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#

AttributeTypeValueDefault ValueDescription
isOpenbooleanControl internal isOpen boolean manually
onClickfunctionSend onClick callback when user clicks outside menu
disableOutsideClickbooleanPrevent outside click from closing menu
directionstringtop/right/bottom/leftbottomDirection dropdown should appear around button
rightstringendstartDirection menu should appear with set direction prop
offsetstring4Distance from button menu should appear
iconbooleantrue/falseundefinedSet Chevron Icon on Dropdown Toggle
rtlbooleantrue/falseundefinedSet Dropdown Toggle to right-to-left