Dropdown

⚠️ Dropdown component is deprecated and will be removed in the next major version. Please use "DropdownModern" component instead. This is the React implementation of the Dropdown component.

Usage

                                                
                                                import { Dropdown, Button } from '@lmc-eu/spirit-web-react/components';

                                                
                                                <Dropdown id="DropdownExample" renderTrigger={({ trigger }) => <Button {...trigger}>Trigger</Button>}>
                                                  …
                                                </Dropdown>

Dropdown with Item

Enhance your DropdownPopover by incorporating the versatile Item component. Explore additional examples and insights within the dedicated documentation for the Item component.

                                                
                                                import { Dropdown, Button, Item } from '@lmc-eu/spirit-web-react/components';
                                                
                                                <Dropdown id="DropdownExample" renderTrigger={({ trigger }) => <Button {...trigger}>Trigger</Button>}>
                                                  <Item elementType="a" href="#" label="Item label" />
                                                </Dropdown>;

API

Name	Type	Default	Required	Description
enableAutoClose	bool	true	✕	Enables close on click outside of Dropdown
fullWidthMode	DropdownFullwidthMode	off	✕	Full-width mode
id	string	<random>	✕	Component id
onAutoClose .	(event: Event) => void	—	✕	Callback on close on click outside of Dropdown
placement	Placement dictionary	bottom-start	✕	Alignment of the component
renderTrigger	(render: DropdownRenderProps) => ReactNode	—	✕	Properties for trigger render

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.

DropdownRenderProps

Name	Type	Description
isOpen	bool	When dropdown is open
trigger	Object	Trigger properties
trigger.onClick	string	Trigger onClick event
trigger.className	string	Trigger state classname
trigger['aria-expanded']	Booleanish	Trigger aria expanded
trigger['aria-controls']	string	Trigger aria controls
trigger.ref	LegacyRef<HTMLButtonElement & HTMLAnchorElement>	Trigger reference

---

DropdownModern

⚠️ DropdownModern component is deprecated and will be renamed to Dropdown in the next major version.

Usage

                                                
                                                import { DropdownModern, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components';

                                                
                                                const [isOpen, setIsOpen] = React.useState(false);
                                                const onToggle = () => setIsOpen(!isOpen);
                                                
                                                <DropdownModern id="DropdownExample" isOpen={isOpen} onToggle={onToggle}>
                                                  <DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
                                                  <DropdownPopover>…</DropdownPopover>
                                                </DropdownModern>;

⚠️ DEPRECATION NOTICE

Both cross-axis placements have been renamed from top-left, top-right, right-top, right-bottom, etc. to top-start, top-end, right-start, right-end, etc. The old names are deprecated and will be removed in the next major release.

What are deprecations?

Dropdown with Item

Enhance your DropdownPopover by incorporating the versatile Item component. Explore additional examples and insights within the dedicated documentation for the Item component.

                                                
                                                const [isOpen, setIsOpen] = React.useState(false);
                                                const onToggle = () => setIsOpen(!isOpen);
                                                
                                                <DropdownModern id="DropdownExample" isOpen={isOpen} onToggle={onToggle}>
                                                  <DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
                                                  <DropdownPopover>
                                                    <Item elementType="a" href="#" label="Item label" />
                                                  </DropdownPopover>
                                                </DropdownModern>;

Uncontrolled dropdown

                                                
                                                import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components';

                                                
                                                <UncontrolledDropdown id="UncontrolledDropdownExample">
                                                  <DropdownTrigger elementType="button">Trigger button</DropdownTrigger>
                                                  <DropdownPopover>…</DropdownPopover>
                                                </UncontrolledDropdown>

API

DropdownModern

Name	Type	Default	Required	Description
enableAutoClose	bool	true	✕	Enables close on click outside of Dropdown
fullWidthMode	DropdownFullwidthMode	off	✕	Full-width mode
id	string	—	✔	Component id
isOpen	bool	false	✔	Open state
onAutoClose	(event: Event) => void	—	✕	Callback on close on click outside of Dropdown
onToggle	() => void	—	✔	Function for toggle open state of dropdown
placement	Placement dictionary	bottom-start	✕	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

Name	Type	Default	Required	Description
children	[string | ReactNode]	—	✔	Content of trigger element
elementType	[string | ReactNode]	button	✕	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

Name	Type	Default	Required	Description
children	[string | ReactNode]	—	✔	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

Name	Type	Default	Required	Description
enableAutoClose	bool	true	✕	Enables close on click outside of Dropdown
fullWidthMode	DropdownFullwidthMode	off	✕	Full-width mode
id	string	<random>	✕	Component id
onAutoClose	(event: Event) => void	—	✕	Callback on close on click outside of Dropdown
placement	Placement dictionary	bottom-start	✕	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.

[dropdownbreakpoint]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L11