---
title: DropdownItem
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/controls/DropdownItem
---

Child element of the `<Dropdown>` component.

Supports click events through the `onClick` prop and the possibility to redirect to other pages through the `to` prop.

Supports subitems through the `items` prop and by passing a render function to the `children` prop.

### Usage

```jsx
import { DropdownItem } from 'nr1'
```

### Props

| `children` REQUIRED node \| (node\|function)\[] | Content to display inside the item.It also accepts a render method as a last children when rendering nested lists. It requires to pass an array to the `items` prop. ````jsx import { Dropdown, DropdownItem } from 'nr1';  const nestedItems = [   { id: '3.1', text: 'Item 3.1' },   { id: '3.2', text: 'Item 3.2' },   { id: '3.3', text: 'Item 3.3' },   { id: '3.4', text: 'Item 3.4' }, ];  const nestedDropdown = (   <Dropdown title="Nested Dropdown">     <DropdownItem>Item 1</DropdownItem>     <DropdownItem>Item 2</DropdownItem>     <DropdownItem items={nestedItems}>       Item 3       {({ item }) => <DropdownItem key={item.id}>{item.text}</DropdownItem>}     </DropdownItem>     <DropdownItem>Item 4</DropdownItem>   </Dropdown> ); ```  ```` |
| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string                              | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `disabled` boolean                              | If `true`, the item is not available for interaction and its onClick callback won't fire.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `items` array                                   | Items to renders a sublist of the current item.This prop also requires to pass a function as a last `children` after the item's content to work.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `onClick` function                              | Callback fired any time the user clicks on the item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `selected` boolean                              | Shows the option as selected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `style` object                                  | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `testId` string                                 | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`.**Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                                                                                                                                                                                                                                                                                                                                                                                                      |
| `to` shape\|string                              | Location object or url string to link to. shape `pathname` REQUIREDstring `search` string `hash` string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |