---
name: 3.2 - Dropdown
route: /components/dropdown
order: 95
menu: 3. Components
---

# Dropdown
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
They’re made interactive using ReactJS in order to control it state.
They’re toggled by clicking, not by hovering; this is an intentional design decision.

import { Playground, PropsTable } from 'docz'
import  { Dropdown, DropdownItem, Icon } from '../'

## Properties

<PropsTable of={Dropdown} />

## Basic usage
Use Pointr's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

<Playground>
  <Dropdown title="Hi Andrea" open>
    <DropdownItem icon="coffee" to="/">
      My Profile
    </DropdownItem>
    <DropdownItem icon="coffee">
      Edit
    </DropdownItem>
    <DropdownItem icon="coffee">
      Share
    </DropdownItem>
    <DropdownItem icon="coffee">
      Download Billboard
    </DropdownItem>
    <DropdownItem textCenter>
      Sign out
    </DropdownItem>
  </Dropdown>
</Playground>

## Disabled

<Playground>
  <Dropdown title="Hi Andrea" disabled>
    <DropdownItem icon="coffee">
      My Profile
    </DropdownItem>
  </Dropdown>
</Playground>

## Events

### onToggle

<Playground>
  <Dropdown title="Hi Andrea" onToggle={() => {alert('on toggle')}}>
    <DropdownItem icon="coffee">
      My Profile
    </DropdownItem>
  </Dropdown>
</Playground>

### onOpen

<Playground>
  <Dropdown title="Hi Andrea" onOpen={() => {alert('on open')}}>
    <DropdownItem icon="coffee">
      My Profile
    </DropdownItem>
  </Dropdown>
</Playground>

### onClose

<Playground>
  <Dropdown title="Hi Andrea" onClose={() => {alert('on close')}}>
    <DropdownItem icon="coffee">
      My Profile
    </DropdownItem>
  </Dropdown>
</Playground>


