> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/dropdown.md).

# 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="/files/nZCHsxoWi0zPgaofUswm" 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).