• /
  • Log in
  • Free account

Dropdown

<Dropdown> are toggleable overlays for displaying a list of options.

The <Dropdown> component can render the items in two ways: as an array of <DropdownItem> elements or as a render callback (Function as Children).

The recommendation is to use the render callback when a large number of items is provided because then the dropdown will virtualize all the items and performance will be greatly improve.

If you are willing to use <Dropdown> to paint a select field as you would do in a form, use <Select> instead.

The component also supports nested lists, check out the DropdownItem documentation to learn more.

Usage

import { Dropdown } from 'nr1'

Examples

Basic

1
<Dropdown title="Dropdown">
2
<DropdownItem>Item 1</DropdownItem>
3
<DropdownItem onClick={(evt) => console.log(evt)}>Item 2</DropdownItem>
4
<DropdownItem>Item 3</DropdownItem>
5
<DropdownItem>Item 4</DropdownItem>
6
</Dropdown>;

With sub items

1
function render() {
2
const items = new Array(10).fill().map((_, i) => i + 1);
3
4
return (
5
<Dropdown title="Dropdown">
6
<DropdownItem>Item 1</DropdownItem>
7
<DropdownItem onClick={(evt) => console.log(evt)}>Item 2</DropdownItem>
8
<DropdownItem items={items}>
9
Item 3
10
{({ item, index }) => (
11
<DropdownItem key={index} onClick={(evt) => console.log(evt)}>
12
Item 3.{item}
13
</DropdownItem>
14
)}
15
</DropdownItem>
16
<DropdownItem>Item 4</DropdownItem>
17
</Dropdown>
18
);
19
}

Sections

1
<Dropdown title="Dropdown" sectioned>
2
<DropdownSection title="Section 1">
3
<DropdownItem>Item 1.1</DropdownItem>
4
<DropdownItem>Item 1.2</DropdownItem>
5
</DropdownSection>
6
7
<DropdownSection title="Section 2">
8
<DropdownItem>Item 2.1</DropdownItem>
9
<DropdownItem>Item 2.2</DropdownItem>
10
</DropdownSection>
11
</Dropdown>;

Virtualized list

1
function render() {
2
const items = new Array(10000).fill().map((_, i) => `Item ${i}`);
3
4
return (
5
<Dropdown title="Dropdown" items={items}>
6
{({ item, index }) => (
7
<DropdownItem key={index} onClick={() => alert(item)}>
8
{item}
9
</DropdownItem>
10
)}
11
</Dropdown>
12
);
13
}

Virtualized sections and items list

1
function render() {
2
const sections = new Array(30).fill().map((_, s) => ({
3
title: `Section ${s}`,
4
items: new Array(1000).fill().map((_, i) => `Item ${s}.${i}`),
5
}));
6
7
return (
8
<Dropdown title="Dropdown" items={sections} sectioned>
9
{({ item: section, index }) => (
10
<DropdownSection
11
key={index}
12
title={section.title}
13
items={section.items}
14
>
15
{({ item, index }) => <DropdownItem>{item}</DropdownItem>}
16
</DropdownSection>
17
)}
18
</Dropdown>
19
);
20
}

Props

childrenrequirednode|function

This component can render either declaratively, by directly passing a set of children or virtualized, by passing a render callback (function as children).

Children can be of two types: <DropdownItem>s, to generate items; or <DropdownSection>s, when the dropdown is sectioned. Each section can, in turn, have <DropdownItem>s in it.

The recommendation is to use the render callback when a large number of items is provided, since the item list will be virtualized by the component, thus increasing the performance.

When using the render callback, items need to be provided through the items prop. Then, the callback will be called for each item present in the array, and the expected result is a <DropdownItem> or a <DropdownSection> depending on the sectioned prop.

function () => undefined
classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

disabledboolean

If true, the dropdown is not available for interaction.

iconTypeenum

Icon to display.

<One of
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__AREA_CHART,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__BAR_CHART,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__CHART,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__CHART__A_ADD,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__CHART__A_EDIT,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__CHART__A_REMOVE,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD__A_ADD,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD__A_EDIT,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD__A_FILTER,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD__A_REMOVE,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__LINE_CHART,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__PIE_CHART,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__DATE,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__DATE__A_ADD,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__DATE__A_REMOVE,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__TIME,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__TIME__A_ADD,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__TIME__A_REMOVE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__ATTACHMENT,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__DOCUMENTATION,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__EMAIL,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__EMAIL__V_ALTERNATE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE__A_ADD,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE__A_REMOVE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FOLDER,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FOLDER__A_ADD,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FOLDER__A_REMOVE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_ADD,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_EDIT,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_REMOVE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__ANOMALIES,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__A_INSPECT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CPU,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MEMORY,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__A_INSPECT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_ADD,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_CONFIGURE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_EDIT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_INSPECT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_PAUSE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_REMOVE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__STORAGE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_CLUSTER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_CONTAINER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_DEPLOYMENT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_MASTER_NODE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_NAMESPACE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_NODE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_POD,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_SERVICE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CLOUD,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CODE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CONTAINER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CONTROL_CENTER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CORRELATION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CORRELATION_REASONING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DECISIONS,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DESTINATIONS,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DOWNSTREAM_CONNECTION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DOWNSTREAM_DEPLOYMENT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__EVENT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__FEED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__LIVE_VIEW,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__LOGS,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MONITORING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__NODE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__OVERVIEW,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PATHWAY,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__QUERY,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SOURCES,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__STACK_TRACE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SYNTHESIZED_ENTITY,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SYNTHETICS_MONITOR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SYSTEM,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__TRAFFIC,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__UPSTREAM_CONNECTION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__UPSTREAM_DEPLOYMENT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__WORKLOADS,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_BOTTOM,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_BOTTOM__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_DIAGONAL_BOTTOM_LEFT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_DIAGONAL_BOTTOM_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_DIAGONAL_TOP_LEFT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_DIAGONAL_TOP_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_HORIZONTAL,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_LEFT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_LEFT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_RIGHT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_TOP,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_TOP__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_VERTICAL,
Dropdown.ICON_TYPE.INTERFACE__ARROW__EXPAND,
Dropdown.ICON_TYPE.INTERFACE__ARROW__GO_TO,
Dropdown.ICON_TYPE.INTERFACE__ARROW__MOVE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__RESIZE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__RETURN_LEFT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__RETURN_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__SHRINK,
Dropdown.ICON_TYPE.INTERFACE__ARROW__SORT,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__INFO__ANNOUNCEMENT,
Dropdown.ICON_TYPE.INTERFACE__INFO__HELP,
Dropdown.ICON_TYPE.INTERFACE__INFO__INFO,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ADJUST,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ALERT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ALERT__A_REMOVE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ALERT__S_OFF,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ALERT__S_ON,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ARCHIVE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CENTER,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CLOSE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CLOSE__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CLOSE__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CONFIGURE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__COPY_TO,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__COPY_TO_CLIPBOARD,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__DOWNLOAD,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__DRAG,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__EDIT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__EXPORT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__EXTERNAL_LINK,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FILTER,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FILTER__A_ADD,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FILTER__A_REMOVE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FILTER__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FOLLOW,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__GROUP,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__GROUP__A_REMOVE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__GROUP__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__HIDE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__HIDE_OTHERS,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__HIGHLIGHT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__IMPORT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__MORE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PAUSE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PAUSE_ALTERNATE__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PIN,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PLAY,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PLAY_ALTERNATE__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__REARRANGE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__REDO,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__REFRESH,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__REMOVE__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SEARCH,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SEARCH__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SELECTION,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SELECTION__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SHARE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SHARE_LINK,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SHOW,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__TAG,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__TRASH,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__TV_MODE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__TV_MODE__A_TV_MODE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__UNDO,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__UNPIN,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__UPLOAD,
Dropdown.ICON_TYPE.INTERFACE__PLACEHOLDERS__CUSTOM_PLACEHOLDER,
Dropdown.ICON_TYPE.INTERFACE__PLACEHOLDERS__ICON_PLACEHOLDER,
Dropdown.ICON_TYPE.INTERFACE__SIGN__ASTERISK,
Dropdown.ICON_TYPE.INTERFACE__SIGN__CHECKMARK,
Dropdown.ICON_TYPE.INTERFACE__SIGN__CHECKMARK__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__CLOSE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__DOLLAR_SIGN,
Dropdown.ICON_TYPE.INTERFACE__SIGN__EXCLAMATION,
Dropdown.ICON_TYPE.INTERFACE__SIGN__EXCLAMATION__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__MINUS,
Dropdown.ICON_TYPE.INTERFACE__SIGN__MINUS__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__NUMBER,
Dropdown.ICON_TYPE.INTERFACE__SIGN__PLUS,
Dropdown.ICON_TYPE.INTERFACE__SIGN__PLUS__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__TIMES,
Dropdown.ICON_TYPE.INTERFACE__SIGN__TIMES__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__SIGN__TIMES__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__STATE__CLOSED,
Dropdown.ICON_TYPE.INTERFACE__STATE__CRITICAL,
Dropdown.ICON_TYPE.INTERFACE__STATE__DISABLED,
Dropdown.ICON_TYPE.INTERFACE__STATE__ENABLED,
Dropdown.ICON_TYPE.INTERFACE__STATE__HEALTHY,
Dropdown.ICON_TYPE.INTERFACE__STATE__LOADING,
Dropdown.ICON_TYPE.INTERFACE__STATE__LOCK,
Dropdown.ICON_TYPE.INTERFACE__STATE__OPEN,
Dropdown.ICON_TYPE.INTERFACE__STATE__PRIVATE,
Dropdown.ICON_TYPE.INTERFACE__STATE__PUBLIC,
Dropdown.ICON_TYPE.INTERFACE__STATE__UNAVAILABLE,
Dropdown.ICON_TYPE.INTERFACE__STATE__UNLOCK,
Dropdown.ICON_TYPE.INTERFACE__STATE__WARNING,
Dropdown.ICON_TYPE.INTERFACE__VIEW__ENTER_FULL_SCREEN,
Dropdown.ICON_TYPE.INTERFACE__VIEW__EXIT_FULL_SCREEN,
Dropdown.ICON_TYPE.INTERFACE__VIEW__GRID_VIEW,
Dropdown.ICON_TYPE.INTERFACE__VIEW__HIGH_DENSITY_VIEW,
Dropdown.ICON_TYPE.INTERFACE__VIEW__LAYER_LIST,
Dropdown.ICON_TYPE.INTERFACE__VIEW__LIST_VIEW,
Dropdown.ICON_TYPE.INTERFACE__VIEW__SIXTH_SENSE,
Dropdown.ICON_TYPE.INTERFACE__VIEW__THEME_TOGGLE,
Dropdown.ICON_TYPE.INTERFACE__VIEW__THEME_TOGGLE__S_DARK,
Dropdown.ICON_TYPE.INTERFACE__VIEW__THEME_TOGGLE__S_LIGHT,
Dropdown.ICON_TYPE.LOCATION__LOCATION__HOME,
Dropdown.ICON_TYPE.LOCATION__LOCATION__MAP,
Dropdown.ICON_TYPE.LOCATION__LOCATION__PIN,
Dropdown.ICON_TYPE.LOCATION__LOCATION__WORLD,
Dropdown.ICON_TYPE.PROFILES__EVENTS__COMMENT,
Dropdown.ICON_TYPE.PROFILES__EVENTS__COMMENT__A_EDIT,
Dropdown.ICON_TYPE.PROFILES__EVENTS__FAVORITE,
Dropdown.ICON_TYPE.PROFILES__EVENTS__FAVORITE__WEIGHT_BOLD,
Dropdown.ICON_TYPE.PROFILES__EVENTS__LIKE,
Dropdown.ICON_TYPE.PROFILES__USERS__ORGANIZATION,
Dropdown.ICON_TYPE.PROFILES__USERS__ORGANIZATION__A_ADD,
Dropdown.ICON_TYPE.PROFILES__USERS__ORGANIZATION__A_EDIT,
Dropdown.ICON_TYPE.PROFILES__USERS__ORGANIZATION__A_REMOVE,
Dropdown.ICON_TYPE.PROFILES__USERS__TEAM,
Dropdown.ICON_TYPE.PROFILES__USERS__TEAM__A_ADD,
Dropdown.ICON_TYPE.PROFILES__USERS__TEAM__A_EDIT,
Dropdown.ICON_TYPE.PROFILES__USERS__TEAM__A_REMOVE,
Dropdown.ICON_TYPE.PROFILES__USERS__USER,
Dropdown.ICON_TYPE.PROFILES__USERS__USER__A_ADD,
Dropdown.ICON_TYPE.PROFILES__USERS__USER__A_EDIT,
Dropdown.ICON_TYPE.PROFILES__USERS__USER__A_REMOVE,
>
infostring

Additional information can be displayed in an info tooltip next to the Label.

itemsarray

Items to render, in the shape of a list of objects. Usually, each item in the items array contains the required data to generate the corresponding <DropdownItem> (or <DropdownSection> in case the dropdown is sectioned).

This prop is required when rendering items with the render callback (function as children).

Example 1

1
const items = ['Item 1', 'Item 2', 'Item 3'];
2
3
const dropdown = (
4
<Dropdown title="Dropdown" items={items}>
5
{({ item, index }) => (
6
<DropdownItem key={index} onClick={() => console.log(item)}>
7
{item}
8
</DropdownItem>
9
)}
10
</Dropdown>
11
);
labeldeprecatedstring

Due March 1st, 2021

If you are using <Dropdown> as a form component, use <Select> instead.

Text to display as label.

loadingboolean
DEFAULT
false

To indicate whether an action is in progress, especially in the case that it takes more than 1 second to complete, you should display the loading state.

onClosefunction

Callback fired any time the dropdown is closed.

function (
event: Event
) => undefined
onLoadMorefunction

Callback fired when more items must be loaded. This happens when you're lazy loading the items and the items that are about to render cannot be found in the items array.

This callback should be used to fetch/load the missing items from the backend or other sources.

The returned Promise should be resolved once item data has finished loading. It will be used to determine when to refresh the list with the newly-loaded data. This callback may be called multiple times in reaction to a single scroll event.

function (
cursor: {Object //

Items to load.

) => undefined

Lazy loading items

1
import { Dropdown, DropdownItem } from 'nr1';
2
3
// This example assumes you have a way to know/load this information.
4
const remoteTotalNumberOfItems = 9000;
5
const items = [
6
{ id: 1, text: 'Item 1' },
7
{ id: 2, text: 'Item 2' },
8
{ id: 3, text: 'Item 3' },
9
{ id: 4, text: 'Item 4' },
10
];
11
12
function fetchMore({ startIndex, stopIndex }) {
13
return fetch(
14
`path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`
15
).then((response) => {
16
// Store items in item list...
17
});
18
}
19
20
const dropdown = (
21
<Dropdown
22
items={items}
23
onLoadMore={fetchMore}
24
rowCount={remoteTotalNumberOfItems}
25
title="Dropdown"
26
>
27
{({ item, index }) => <DropdownItem key={index}>{item.text}</DropdownItem>}
28
</Dropdown>
29
);

Integration with the query components

1
import { EntitiesByDomainTypeQuery, Dropdown, DropdownItem } from 'nr1';
2
3
const renderDropdown = (queryResult) => {
4
const { fetchMore, loading, data } = queryResult;
5
const { results, count } = data.actor.entitySearch;
6
7
return (
8
<Dropdown
9
items={results.entities}
10
onLoadMore={fetchMore}
11
rowCount={count}
12
title="Dropdown"
13
>
14
{({ item, index }) => (
15
<DropdownItem key={index}>{item.text}</DropdownItem>
16
)}
17
</Dropdown>
18
);
19
};
20
21
const style = { width: 200, height: 300 };
22
const dropdown = (
23
<EntitiesByDomainTypeQuery entityDomain="APM" entityType="APPLICATION">
24
{renderDropdown}
25
</EntitiesByDomainTypeQuery>
26
);
onOpenfunction

Callback fired any time the dropdown is opened.

function (
event: Event
) => undefined
onSearchfunction

Callback fired any time the search input of the dropdown changes. This callback needs the search prop to be defined.

function (
event: Event
) => undefined
onTogglefunction

Callback fired any time the dropdown is toggled.

function (
event: Event,
opened: boolean
) => undefined
placementTypeenum
DEFAULT
Dropdown.PLACEMENT_TYPE.BOTTOM_START

Specifies the placement of the dropdown relative to the dropdown trigger. Default display is on the bottom start, but you can also choose to display it from the bottom end.

<One of
Dropdown.PLACEMENT_TYPE.BOTTOM_END,
Dropdown.PLACEMENT_TYPE.BOTTOM_START,
>
rowCountnumber

Number of rows.

By default it's equal to length of array passed in the items prop.

You should specify the rowCount when you know the total number of items but you want to lazy load them while scrolling.

searchstring

Value of the search input. The search input will be shown only if the value is defined.

sectionedboolean
DEFAULT
false

Establishes whether the dropdown is sectioned. A sectioned dropdown composes its options grouped by sections (made with <DropdownSection>), where each section is delimited by an optional title at the top, and a horizontal separator at the bottom.

spacingTypeenum[]

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

<Array of
<One of
Dropdown.SPACING_TYPE.EXTRA_LARGE,
Dropdown.SPACING_TYPE.LARGE,
Dropdown.SPACING_TYPE.MEDIUM,
Dropdown.SPACING_TYPE.NONE,
Dropdown.SPACING_TYPE.OMIT,
Dropdown.SPACING_TYPE.SMALL,
>
>
styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id.

Used to target the component in unit and e2e testing.

titlestring
DEFAULT
""

The text to display in the dropdown button. When not present, an icon must be passed instead.

typeenum
DEFAULT
Dropdown.TYPE.NORMAL

Type can be:

  • Primary — use to call attention to one specific action you want the user to take as a next step.

  • Default (used as secondary) — use when multiple actions need to be displayed.

  • Plain — use when multiple actions need to be available that are less important for the user to take.

  • Destructive — use when you have a destructive action like delete or remove, which you would like the user to pause and consider before completing.

<One of
Dropdown.TYPE.DESTRUCTIVE,
Dropdown.TYPE.NORMAL,
Dropdown.TYPE.PLAIN,
Dropdown.TYPE.PLAIN_NEUTRAL,
Dropdown.TYPE.PRIMARY,
>

Methods

Dropdown.render

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.