Dropdown

Displays a popup around an anchor component.

Basic

NOTE: Be careful when working with containers that use `position: relative;` as it can mess with the placement.

Placement

The dropdown has different placement options that can be used to adjust the positioning of the dropdown. Notice how the dropdown also animates based on the placement. This is made possible through our custom placement functions. The default placement is `bottom-start`.

Shadow

Add a shadow to the drop down.

Overflow

Even though we implemented our own functions for placement notice how the dropdown still reacts to overflow Try scrolling the page with the dropdown open and see the results.

Anchor Binding

You can bind a reference to an anchor or a query selector. This can be useful when working with something like context menus on dynamic list where you can't create a reference for each item in the list.

Anchor Events

Sometimes it may be necessary or more convenient to create the event listener from the Dropdown itself for this you can use the `event` attribute.

Animation

Because dropdown keeps track of the position the drop down ends up at it can animate the in and out. You can disable this using the `animate` attribute.

Offsets

You can use offsets to add space between the anchor and the dropdown.

Scroll Lock

Sometimes you may want to lock scroll when a popup is open add the `lockScroll` attribute to hide the scrollbar when visible.

NOTE: Remember to use `scrollbar-gutter: stable;` to prevent layout shift when using this feature.