---
name: Dropdown
menu: Components
route: /components/dropdown
---

import { Playground, PropsTable } from "docz";
import { Button, Icon, Text } from "@personio/ui-components";
import { Dropdown } from "@personio/ui-components";
import { State, Toggle } from "react-powerplug";
import styles from "./dropdown.scss";

# Dropdown

Toggle contextual overlays for displaying lists of links and more with the Personio dropdown component.

## Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering.

You can control the state using a prop (controlled approach) or make the component work alone, with a internal state (not controlled approach).

<PropsTable of={Dropdown} />

## Example (not controlled)

The example bellow shows the easiest way to use the Dropdown, using an uncontrolled approach.

<Playground>
  <div className="dropdown-container">
    <Dropdown>
      <Dropdown.Toggle>
        <Button>Hanno Renner</Button>
      </Dropdown.Toggle>
      <Dropdown.List preventToCloseOnClick>
        <Dropdown.Item
          href="https://www.personio.de/"
          target="_blank"
          rel="nooponer noreferrer"
        >
          Your account
        </Dropdown.Item>
        <Dropdown.Header>Header</Dropdown.Header>
        {["Lorem", "Ipsum"].map(item => (
          <Dropdown.Item key={item} target="_blank" href="/">
            {item} - foo
          </Dropdown.Item>
        ))}
      </Dropdown.List>
    </Dropdown>
  </div>
</Playground>
