---
sidebar_position: 7
---

import { Dropdown, Button, Text, ActionIcon, Avatar, cn } from "rizzui";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import {
  AdjustmentsHorizontalIcon,
  PencilIcon,
  DocumentDuplicateIcon,
  ArchiveBoxIcon,
  ArrowRightCircleIcon,
  ShareIcon,
  HeartIcon,
  TrashIcon,
} from "@heroicons/react/24/outline";
import Paper from "@site/src/components/paper";

# Dropdown

A floating container which will appear on clicking the dropdown button.

```tsx
"use client"; 

import { Dropdown } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

A simple dropdown with component **Dropdown**.

<Paper>
  <Dropdown>
    <Dropdown.Trigger>
      <Button
        as="span"
        variant="outline"
      >
        Settings
        <ChevronDownIcon className="ml-2 w-5" />
      </Button>
    </Dropdown.Trigger>
    <Dropdown.Menu className="text-sm font-inter">
      <Dropdown.Item>Account Settings</Dropdown.Item>
      <Dropdown.Item>Support</Dropdown.Item>
      <Dropdown.Item>License</Dropdown.Item>
      <Dropdown.Item>Sign Out</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
</Paper>

```tsx
"use client"; 

import { Dropdown, Button } from "rizzui";

export default function App() {
  return (
    <Dropdown>
      <Dropdown.Trigger>
        <Button
          as="span"
          variant="outline"
        >
          Settings <ChevronDownIcon className="ml-2 w-5" />
        </Button>
      </Dropdown.Trigger>
      <Dropdown.Menu>
        <Dropdown.Item>Account Settings</Dropdown.Item>
        <Dropdown.Item>Support</Dropdown.Item>
        <Dropdown.Item>License</Dropdown.Item>
        <Dropdown.Item>Sign Out</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}
```

<div className="mb-16" />

## With Icons

You can use **placement** and icon.

<Paper>
  <Dropdown placement="bottom-end">
    <Dropdown.Trigger>
      <ActionIcon
        as="span"
        variant="outline"
        rounded="full"
      >
        <AdjustmentsHorizontalIcon className="h-5 w-5" />
      </ActionIcon>
    </Dropdown.Trigger>
    <Dropdown.Menu className="divide-y text-sm font-inter">
      <div className="mb-2">
        <Dropdown.Item>
          <PencilIcon className="mr-2 h-4 w-4" />
          Edit
        </Dropdown.Item>
        <Dropdown.Item>
          <DocumentDuplicateIcon className="mr-2 h-4 w-4" />
          Duplicate
        </Dropdown.Item>
      </div>
      <div className="mb-2 pt-2">
        <Dropdown.Item>
          <ArchiveBoxIcon className="mr-2 h-4 w-4" />
          Archive
        </Dropdown.Item>
        <Dropdown.Item>
          <ArrowRightCircleIcon className="mr-2 h-4 w-4" />
          Move
        </Dropdown.Item>
      </div>
      <div className="mb-2 pt-2">
        <Dropdown.Item>
          <ShareIcon className="mr-2 h-4 w-4" />
          Share
        </Dropdown.Item>
        <Dropdown.Item>
          <HeartIcon className="mr-2 h-4 w-4" />
          Add to Favourite
        </Dropdown.Item>
      </div>
      <div className="mt-2 pt-2">
        <Dropdown.Item>
          <TrashIcon className="mr-2 h-4 w-4" />
          Delete
        </Dropdown.Item>
      </div>
    </Dropdown.Menu>
  </Dropdown>
</Paper>

```tsx
"use client"; 

import { Dropdown, Button, cn, ActionIcon } from "rizzui";
import {
  AdjustmentsHorizontalIcon,
  PencilIcon,
  DocumentDuplicateIcon,
  ArchiveBoxIcon,
  ArrowRightCircleIcon,
  ShareIcon,
  HeartIcon,
  TrashIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Dropdown placement="bottom-end">
      <Dropdown.Trigger>
        <ActionIcon
          variant="outline"
          rounded="full"
        >
          <AdjustmentsHorizontalIcon className="h-5 w-5" />
        </ActionIcon>
      </Dropdown.Trigger>
      <Dropdown.Menu className="divide-y">
        <div className="mb-2">
          <Dropdown.Item>
            <PencilIcon className="mr-2 h-4 w-4" />
            Edit
          </Dropdown.Item>
          <Dropdown.Item>
            <DocumentDuplicateIcon className="mr-2 h-4 w-4" />
            Duplicate
          </Dropdown.Item>
        </div>
        <div className="mb-2 pt-2">
          <Dropdown.Item>
            <ArchiveBoxIcon className="mr-2 h-4 w-4" />
            Archive
          </Dropdown.Item>
          <Dropdown.Item>
            <ArrowRightCircleIcon className="mr-2 h-4 w-4" />
            Move
          </Dropdown.Item>
        </div>
        <div className="mb-2 pt-2">
          <Dropdown.Item>
            <ShareIcon className="mr-2 h-4 w-4" />
            Share
          </Dropdown.Item>
          <Dropdown.Item>
            <HeartIcon className="mr-2 h-4 w-4" />
            Add to Favourite
          </Dropdown.Item>
        </div>
        <div className="mt-2 pt-2">
          <Dropdown.Item>
            <TrashIcon className="mr-2 h-4 w-4" />
            Delete
          </Dropdown.Item>
        </div>
      </Dropdown.Menu>
    </Dropdown>
  );
}
```

<div className="mb-16" />

## With Avatar

The variation is limitless. You can style your **Dropdown** as you want to do.

<Paper>
  <Dropdown placement="bottom-end">
    <Dropdown.Trigger>
      <Avatar
        size="lg"
        name="John Doe"
        src="https://randomuser.me/api/portraits/women/40.jpg"
        className="cursor-pointer"
      />
    </Dropdown.Trigger>
    <Dropdown.Menu className="w-56 divide-y text-sm font-inter text-gray-600">
      <Dropdown.Item className="hover:bg-transparent">
        <Avatar
          name="John Doe"
          src="https://randomuser.me/api/portraits/women/40.jpg"
        />
        <span className="ml-2 text-start">
          <Text className="text-gray-900 font-medium leading-tight">Mary Hoops</Text>
          <Text>maryhe@demo.io</Text>
        </span>
      </Dropdown.Item>
      <div className="mt-3 mb-2 pt-2">
        <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
          Account Settings
        </Dropdown.Item>
        <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">Support</Dropdown.Item>
        <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">License</Dropdown.Item>
      </div>
      <div className="mt-2 pt-2">
        <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">Sign Out</Dropdown.Item>
      </div>
    </Dropdown.Menu>
  </Dropdown>
</Paper>

```tsx
"use client"; 

import { Dropdown, Text, Avatar } from "rizzui";

export default function App() {
  return (
    <Dropdown placement="bottom-end">
      <Dropdown.Trigger>
        <Avatar
          name="John Doe"
          src="https://randomuser.me/api/portraits/women/40.jpg"
          className="cursor-pointer"
        />
      </Dropdown.Trigger>
      <Dropdown.Menu className="w-56 divide-y text-gray-600">
        <Dropdown.Item className="hover:bg-transparent">
          <Avatar
            name="John Doe"
            src="https://randomuser.me/api/portraits/women/40.jpg"
          />
          <span className="ml-2 text-start">
            <Text className="text-gray-900 font-medium leading-tight">Mary Hoops</Text>
            <Text>maryhe@demo.io</Text>
          </span>
        </Dropdown.Item>
        <div className="mt-3 mb-2 pt-2">
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">
            Account Settings
          </Dropdown.Item>
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">Support</Dropdown.Item>
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">License</Dropdown.Item>
        </div>
        <div className="mt-2 pt-2">
          <Dropdown.Item className="hover:bg-gray-900 hover:text-gray-50">Sign Out</Dropdown.Item>
        </div>
      </Dropdown.Menu>
    </Dropdown>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Dropdown Props

Here is the API documentation of the Dropdown component. You can use the following props to create a Dropdown.

<div className="overflow-x-auto">

|   Props   |                   Type                   |                               Description                               |     Default      |
| :-------: | :--------------------------------------: | :---------------------------------------------------------------------: | :--------------: |
| children  |                   \_\_                   |        Use **Dropdown.Trigger** & **Dropdown.Menu** as childrens        |       \_\_       |
|  rounded  |   [DropdownRounded](#dropdown-rounded)   |          The rounded variants supported by this component are:          |      `"md"`      |
|  shadow   |   [DropdownShadows](#dropdown-shadows)   |          The shadow variants supported by this component are:           |      `"md"`      |
| placement | [DropdownPlacement](#dropdown-placement) | The dropdown menu placements. Won't work if **inPortal** prop is false. | `"bottom-start"` |
| inPortal  |                `boolean`                 |     Whether the **Dropdown.Menu** is rendered on the portal or not      |     `"true"`     |
|   modal   |                `boolean`                 |  Whether the body scrollbar is hidden or not when dropdown is visible.  |    `"false"`     |
|    gap    |                 `number`                 |       Sets the gap between trigger and dropdown if portal is true       |      `"6"`       |
| className |                 `string`                 |            Add classes to the main wrapper of this component            |       \_\_       |

</div>

<div className="mb-10" />

### Dropdown.Trigger

<div className="overflow-x-auto">

|   Props   |                    Type                    |                                    Description                                    | Default |
| :-------: | :----------------------------------------: | :-------------------------------------------------------------------------------: | :-----: |
|    as     |             `div` or `button`              | Use `as` to convert **Dropdown.Trigger** component to render as `div` or `button` |  `div`  |
|    ref    |                    \_\_                    |             Use ref prop to access DOM nodes of **Dropdown.Trigger**              |  \_\_   |
| children  |                `ReactNode`                 |                       Use any valid React element or string                       |  \_\_   |
| className |                  `string`                  |                  Add classes to the **Dropdown.Trigger** wrapper                  |  \_\_   |
|    ...    | `ButtonHTMLAttributes` or `HTMLAttributes` |           native props like **onClick**, **title**, **aria-label** ...            |  \_\_   |

</div>

<div className="mb-10" />

### Dropdown.Menu

<div className="overflow-x-auto">

|    Props    |     Type      |                                    Description                                    | Default |
| :---------: | :-----------: | :-------------------------------------------------------------------------------: | :-----: |
|     as      | `div` or `ul` |    Use `as` to convert **Dropdown.Menu** component to render as `div` or `ul`     |  `div`  |
|  children   |  `ReactNode`  |                   Use Dropdown.Item and any valid React element                   |  \_\_   |
| anchorWidth |   `boolean`   | This item will set the `Dropdown.Menu` width same as the `Dropdown.Trigger` width | `false` |
|  className  |   `string`    |                   Add classes to the **Dropdown.Menu** wrapper                    |  \_\_   |

</div>

<div className="mb-10" />

### Dropdown.Item

<div className="overflow-x-auto">

|       Props       |                    Type                    |                                  Description                                  | Default  |
| :---------------: | :----------------------------------------: | :---------------------------------------------------------------------------: | :------: |
|        as         |              `button` or `li`              | Use `as` to convert **Dropdown.Item** component to render as `button` or `li` | `button` |
|     children      |                `ReactNode`                 |                     Use any valid React element or sting                      |   \_\_   |
|     disabled      |                 `boolean`                  |               This item will be skipped by keyboard navigation                | `false`  |
|  activeClassName  |                  `string`                  |                To style active state of the **Dropdown.Item**                 |   \_\_   |
| disabledClassName |                  `string`                  |                To style disable state of the **Dropdown.Item**                |   \_\_   |
|     className     |                  `string`                  |                     Add classes to the **Dropdown.Item**                      |   \_\_   |
|        ...        | `ButtonHTMLAttributes` or `HTMLAttributes` |         native props like **onClick**, **title**, **aria-label** ...          |   \_\_   |

</div>

<div className="mb-10" />

### Dropdown Rounded

```ts
type DropdownRounded = "sm" | "md" | "lg" | "xl" | "none";
```

<div className="mb-10" />

### Dropdown Shadows

```ts
type DropdownShadows = "sm" | "md" | "lg" | "xl" | "none";
```

<div className="mb-10" />

### Dropdown Placement

```ts
type DropdownPlacements =
  | "left"
  | "right"
  | "top"
  | "bottom"
  | "left-start"
  | "left-end"
  | "right-start"
  | "right-end"
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end";
```
