Dropdown

A Dropdown is a user interface element commonly used in web forms or menus.
Dropdowns are used to conserve screen space and provide a convenient way for users to make selections from a set of predefined options.

This is the Twig implementation of the Dropdown component.

Basic example usage:


                                                
                                                <Dropdown>
                                                  <Button data-spirit-toggle="dropdown" data-spirit-target="dropdown-example" aria-controls="dropdown-example" aria-expanded="false">Open Dropdown</Button>
                                                  <DropdownPopover id="dropdown-example">Dropdown Content</DropdownPopover>
                                                </Dropdown>

Full width on mobile


                                                
                                                <Dropdown>
                                                  <Button data-spirit-toggle="dropdown" data-spirit-target="dropdown-example" aria-controls="dropdown-example" aria-expanded="false">Open Dropdown</Button>
                                                  <DropdownPopover id="dropdown-example" fullWidthMode="mobile-only">Dropdown Content</DropdownPopover>
                                                </Dropdown>

Advanced example usage with positioning:


                                                
                                                <Dropdown>
                                                  <Button data-spirit-toggle="dropdown" data-spirit-target="dropdown-example" aria-controls="dropdown-example" aria-expanded="false">Open Dropdown</Button>
                                                  <DropdownPopover elementType="span" id="dropdown-example" placement="top-end" fullWidthMode="all">Dropdown Content</DropdownPopover>
                                                </Dropdown>

Example with Item component:


                                                
                                                <Dropdown>
                                                  <Button data-spirit-toggle="dropdown" data-spirit-target="dropdown-example" aria-controls="dropdown-example" aria-expanded="false">Open Dropdown</Button>
                                                  <DropdownPopover id="dropdown-example">
                                                    <Item elementType="a" href="#" label="Item label" />
                                                  </DropdownPopover>
                                                </Dropdown>

You can add any custom trigger like a <Button> but it is necessary to add data-spirit-toggle="dropdown", data-spirit-target="<id>" attributes to register trigger events.

API

DropdownPopover

Name	Type	Default	Required	Description
elementType	string	div	✕	HTML tag to render
fullWidthMode	string	—	✕	Full-width mode [off,mobile-only,all]
id	string	—	✓	DropdownPopover ID
placement	Placement Dictionary	bottom-start	✕	Placement of the dropdown

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.

Trigger attributes

Name	Type	Default	Required	Description
aria-controls	string	—	✕	Aria controls state (auto)
aria-expanded	string	—	✕	Aria expanded state (auto)
data-spirit-target	string	—	✓	Target selector
data-spirit-toggle	string	dropdown	✓	Iterable selector

Other necessary attributes are toggled automatically, like aria-controls and aria-expanded when the component is loaded or the width of the window is changed. There can be several triggers, the same rules apply to each.

Name	Type	Default	Required	Description
elementType	string	div	✕	HTML tag to 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.

JavaScript Plugin

For full functionality, you need to provide Spirit JavaScript:


                                                
                                                <script src="node_modules/@lmc-eu/spirit-web/js/cjs/spirit-web.min.js" async></script>

Please consult the main README for how to include JavaScript plugins.

Or, feel free to write the controlling script yourself.

👉 Check the component's docs in the web package to see the full documentation and API of the plugin.