UikDropdown

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullclassName, e.g. "my-custom-styling"
childrenReact.Nodefalsenull

Items inside a list. You can use array ofUikDropdownItem, which is basically a styled UikButton or any of your components.

positionStringfalsebottomRighttopLeft, topRight, bottomLeft, bottomRight
DisplayComponentReact.NodefalsenullInitial display component that is visible for click, must be able to receive onClick property
listPropsObjectfalse{}props passed down to the list
displayComponentPropsObjectfalse{}props passed down to the display component
...restanyfalseOther properties are passed down to the wrapping element

UikDropdown Examples

ComponentExample Code
<UikDropdown position="bottomLeft">
  <UikDropdownItem>
    Settings
  </UikDropdownItem>
  <UikDropdownItem>
    Your Profile
  </UikDropdownItem>
</UikDropdown>
// custom component
const CustomDisplayComponent = ({ onClick }) => (
  <UikButton
    onClick={ onClick }
    primary
  >
    CustomDisplayComponent
  </UikButton>
)

// usage
<UikDropdown
  DisplayComponent={ CustomDisplayComponent }
  position="bottomLeft"
>
  <UikDropdownItem>
    Settings
  </UikDropdownItem>
  <UikDropdownItem>
    Your Profile
  </UikDropdownItem>
</UikDropdown>