grommet
components

Drop

a container that is overlaid next to a target

Storybook
CodeSandbox

Props

align

How to align the drop with respect to the target element. Not specifying a vertical or horizontal alignment will cause it to be aligned in the center.

{"top": "top", "left": "left"}
{"bottom": "bottom", "right": "right"}

elevation

Elevated height of the target, indicated via a drop shadow.
"none""xsmall""small""medium""large""xlarge""string"

onClickOutside

Function that will be invoked when the user clicks outside the drop.
() => {}

onEsc

Function that will be called when the user presses the escape key inside the drop.

() => {}

overflow

How to control the overflow inside the drop.
"auto""hidden""scroll""visible""string"
{
horizontal:
"auto""hidden""scroll""visible,"
vertical:
"auto""hidden""scroll""visible"
}

plain

Whether the drop element should have no background nor shadow
truefalse

responsive

Whether to dynamically re-place when resized.
truefalse

restrictFocus

Whether the drop should control focus.
truefalse

stretch

Whether the drop element should be stretched to at least match the width of the target element. The default is true because that is what most uses of Drop want, like Select and Menu.

truefalse

target

Target where the drop will be aligned to. This should be a React reference.

"object"

trapFocus

Traps keyboard focus inside of drop.
truefalse

Theme

drop.maxHeight

The max height of the Drop container
string

global.drop.background

The background color of Drop
"#ffffff"

global.drop.border.radius

The corner radius
"0px"

global.drop.extend

Any additional style for Drop.
"any CSS"
(props) => {}

global.drop.shadowSize

Elevated height of the Drop
"small"

global.drop.zIndex

The stack order of the Drop
"20"