# Dropdown

The `Dropdown` component displays a menu to the user, such as a set of actions or functions, triggered by a button.

### Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FfZMQPkELZ709qgprSAA5%2Fdropdown.png?alt=media&#x26;token=15cbd31f-3909-47de-96f6-dc2dfd20015c" alt="Gravity dropdown component" width="186"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <DropdownMenu>
      <DropdownMenuTrigger >Open Menu</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Item 1</DropdownMenuItem>
        <DropdownMenuItem>Item 2</DropdownMenuItem>
        <DropdownMenuItem>Item 3</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

### Props

| Prop      | Description          | Required | Value            |
| --------- | -------------------- | -------- | ---------------- |
| children  | children to render   | required | component(s)     |
| className | custom class         | optional | SCSS or Tailwind |
| inset     | toggle triggle style | optional | boolean          |

### Example

```javascript
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'components/lib';

export function User(){

  return (
    <div>
      <DropdownMenu>

        <DropdownMenuTrigger asChild>
          Trigger
        </DropdownMenuTrigger>

        <DropdownMenuContent align='end'>
        
          <DropdownMenuItem>
            <Button 
              variant='naked' 
              icon='user' 
              text='Edit Account' 
              url='/account/profile'
            />
          </DropdownMenuItem>

          <DropdownMenuItem>
            <Button 
              variant='naked' 
              icon='help-circle' 
              text='Help' 
              url='/help'
            />
          </DropdownMenuItem>

        </DropdownMenuContent>
      </DropdownMenu> 
    </div>
  )
}
```

### Notes

* The `Dropdown` component uses `DropdownMenuPrimitive` components from `@radix-ui/react-dropdown-menu`.
* The `children` prop is required and should include the elements to be displayed in the dropdown.
* The `className` prop allows for custom styling.
* The `inset` prop toggles the trigger style.
* For more details, refer to the [Shadcn Dropdown Menu documentation](https://ui.shadcn.com/docs/components/dropdown-menu).