Dropdown

Getting Started

Forms

Typography

Utilities

Visualization Components

A component that uses render-props to make the expanded state of a dropdown re-usable. It uses the Popper.js library to handle positioning. You can modify the behavior of the popper instance using the popperOptions prop mentioned below.

Props

className

String

closeOnBlur

Bool

true

content

Func

disabled

Bool

false

onCollapse

Func

onExpand

Func

popperOptions

Shape

trigger

Func

zIndex

Number

layers.dropdown

Examples

Default Usage

<Dropdown
  content={() => <div>This is the content</div>}
  trigger={() => <div>This is the trigger</div>}
/><Dropdown
  content={() => <div>This is the content</div>}
  trigger={() => <div>This is the trigger</div>}
/>

Popper Adjustments

<Dropdown
  popperOptions={{
    placement: 'top-start',
    modifiers: { offset: { offset: '0,5' } },
  }}
  content={() => (
    <div>
      <p>This is the content</p>
      <p>This is the content</p>
      <p>This is the content</p>
      <p>This is the content</p>
      <p>This is the content</p>
    </div>
  )}
  trigger={() => <div>This is the trigger</div>}
/><Dropdown
  popperOptions={{
    placement: 'top-start',
    modifiers: { offset: { offset: '0,5' } },
  }}
  content={() => (
    <div>
      <p>This is the content</p>
      <p>This is the content</p>
      <p>This is the content</p>
      <p>This is the content</p>
      <p>This is the content</p>
    </div>
  )}
  trigger={() => <div>This is the trigger</div>}
/>

Dropdown

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Default Usage

Popper Adjustments

Props