Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Examples

import { Button, Dropdown, DropdownTrigger, DropdownPopover } from "@seduo/design-system";
...
const [isOpen, setIsOpen] = React.useState(false);
const onToggle = () => setIsOpen(!isOpen);
...
<Dropdown id="DropdownExample" isOpen={isOpen} onToggle={onToggle}>
    <DropdownTrigger elementType="span">
        <Button>Trigger ({isOpen ? 'open' : 'closed'})</Button>
    </DropdownTrigger>
    <DropdownPopover>
        <Link
            UNSAFE_className="d-flex py-400 pr-400"
            href="#info"
        >
            <Icon name="info" UNSAFE_className="mr-400" />
            <Text UNSAFE_className="ml-300">
                Information
            </Text>
        </Link>
        <Link
            UNSAFE_className="d-flex py-400 pr-400"
            href="#link"
        >
            <Icon name="edit" UNSAFE_className="mr-400" />
            <Text UNSAFE_className="ml-300">
                More links
            </Text>
        </Link>
        <Link
            UNSAFE_className="d-flex py-400 pr-400"
            href="#profile"
        >
            <Icon name="user" UNSAFE_className="mr-400" />
            <Text UNSAFE_className="ml-300">
                Profile
            </Text>
        </Link>
        <Link
            UNSAFE_className="d-flex py-400 pr-400"
            href="#help"
        >
            <Icon name="lightbulb" UNSAFE_className="mr-400" />
            <Text UNSAFE_className="ml-300">
                Help
            </Text>
        </Link>
    </DropdownPopover>
</Dropdown>

React Properties

DropdownProps

Prop name	Type	Default	Required	Description
`enableAutoClose`	`bool`	`true`	no	Enables close on click outside of Dropdown
`fullWidthMode`	`DropdownFullwidthMode`	`off`	no	Full-width mode
`id`	`string`	-	yes	Component id
`isOpen`	`bool`	`false`	yes	Open state
`onAutoClose`	`(event: Event) => void`	-	no	Callback on close on click outside of Dropdown
`onToggle`	`() => void`	-	yes	Function for toggle open state of dropdown
`placement`	Placement dictionary	`bottom-start`	no	Alignment of the component

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

DropdownTrigger

Prop name	Type	Default	Required	Description
`children`	[`string` \| `ReactNode`]	-	yes	Content of trigger element
`elementType`	[`string` \| `ReactNode`]	`button`	no	Element type of dropdown trigger

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

DropdownPopover

Prop name	Type	Default	Required	Description
`children`	[`string` \| `ReactNode`]	-	yes	Content of trigger element

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

UncontrolledDropdown

Prop name	Type	Default	Required	Description
`enableAutoClose`	`bool`	`true`	no	Enables close on click outside of Dropdown
`fullWidthMode`	`DropdownFullwidthMode`	`off`	no	Full-width mode
`id`	`string`	`<random>`	no	Component id
`onAutoClose`	`(event: Event) => void`	-	no	Callback on close on click outside of Dropdown
`placement`	Placement dictionary	`bottom-start`	no	Alignment of the component

On this page