Drop

a container that is overlaid next to a target

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"}

background

Either a color identifier to use for the background color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark is not needed if color is provided.

"string"

{

color:

"string"

{

dark:

"string,"

light: string

}

dark:

"boolean""string,"

image:

"string,"

position:

"string,"

opacity:

"string""boolean""number""weak""medium""strong,"

repeat:

"no-repeat""repeat""string,"

size:

"cover""contain""string,"

light: string

}

elevation

Elevated height of the target, indicated via a drop shadow. Only applicable if the Drop isn't plain.

"none""xsmall""small""medium""large""xlarge""string"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"none""xxsmall""xsmall""small""medium""large""xlarge""string"

{

bottom:

"xxsmall""xsmall""small""medium""large""xlarge""string,"

end:

"xxsmall""xsmall""small""medium""large""xlarge""string,"

horizontal:

"xxsmall""xsmall""small""medium""large""xlarge""string,"

left:

"xxsmall""xsmall""small""medium""large""xlarge""string,"

right:

"xxsmall""xsmall""small""medium""large""xlarge""string,"

start:

"xxsmall""xsmall""small""medium""large""xlarge""string,"

top:

"xxsmall""xsmall""small""medium""large""xlarge""string,"

vertical:

"xxsmall""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, elevation, margin or round.

truefalse

responsive

Whether to dynamically re-place when resized.

truefalse

restrictFocus

Whether the drop should control focus.

truefalse

round

How much to round the corners.

truefalse"xsmall""small""medium""large""xlarge""full""string"

{

corner:

"top""left""bottom""right""top-left""top-right""bottom-left""bottom-right,"

size:

"xsmall""small""medium""large""xlarge""string"

}

stretch

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

truefalse"align"

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.

{"dark": "black", "light": "white"}

global.drop.border.radius

The border radius of the Drop container.

"0px"

global.drop.extend

Any additional style for Drop.

"any CSS"

(props) => {}

global.drop.intelligentMargin

Whether the margin of the Drop should adapt based on the Drop's alignment with respect to its target. Margin will only be applied on the side of the Drop that is adjacent to its target.

boolean

global.edgeSize

The possible sizes for the Drop margin.

{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}

global.drop.elevation

Elevated height above the underlying context, indicated via a drop shadow.

string

global.drop.margin

The margin of the drop from the target.

string | object

global.drop.shadowSize

Deprecated. Use 'global.drop.elevation' instead.

"small"

global.drop.zIndex

The stack order of the Drop.

"20"