DropdownItem

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.

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

REQUIRED

string

search

string

hash

string