DropdownItem

Usage

import { DropdownItem } from 'nr1'

Props

childrenrequirednode|(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.

Basic nested list

1
import { Dropdown, DropdownItem } from 'nr1';
2


3
const nestedItems = [
4
  { id: '3.1', text: 'Item 3.1' },
5
  { id: '3.2', text: 'Item 3.2' },
6
  { id: '3.3', text: 'Item 3.3' },
7
  { id: '3.4', text: 'Item 3.4' },
8
];
9


10
const nestedDropdown = (
11
  <Dropdown title="Nested Dropdown">
12
    <DropdownItem>Item 1</DropdownItem>
13
    <DropdownItem>Item 2</DropdownItem>
14
    <DropdownItem items={nestedItems}>
15
      Item 3
16
      {({ item }) => <DropdownItem key={item.id}>{item.text}</DropdownItem>}
17
    </DropdownItem>
18
    <DropdownItem>Item 4</DropdownItem>
19
  </Dropdown>
20
);
classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

disabledboolean
DEFAULT
false

If true, the item is not available for interaction and its onClick callback won't fire.

itemsarray

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.

onClickfunction

Callback fired any time the user clicks on the item.

function (
event: React.MouseEvent
)
selectedboolean
DEFAULT
false

Shows the option as selected.

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

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.

toshape|string

Location object or url string to link to.

shape

pathnamerequiredstring
searchstring
hashstring