Dropdown

A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.

Source Code

uikit-react-core

Groups

Use the separator property on any data item to create groups of items within the dropdown.

<HvDropdown
  values={[
    {
      id: "import",
      label: "Import",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-download-simple" />}
        />
      ),
    },
    {
      id: "export",
      label: "Export",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-export" />}
        />
      ),
    },
    {
      id: "share",
      label: "Share",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-share-network" />}
        />
      ),
      separator: true,
    },
    {
      id: "settings",
      label: "Settings",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-sliders" />}
        />
      ),
    },
    {
      id: "filters",
      label: "Filters",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-funnel" />}
        />
      ),
      separator: true,
    },
    {
      id: "delete",
      label: "Delete",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-trash" />}
        />
      ),
    },
  ]}
/>

<HvDropdown
  values={[
    {
      id: "import",
      label: "Import",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-download-simple" />}
        />
      ),
    },
    {
      id: "export",
      label: "Export",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-export" />}
        />
      ),
    },
    {
      id: "share",
      label: "Share",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-share-network" />}
        />
      ),
      separator: true,
    },
    {
      id: "settings",
      label: "Settings",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-sliders" />}
        />
      ),
    },
    {
      id: "filters",
      label: "Filters",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-funnel" />}
        />
      ),
      separator: true,
    },
    {
      id: "delete",
      label: "Delete",
      icon: (
        <HvStatusIcon
          variant="default"
          type="simple"
          customIcon={<div className="i-ph-trash" />}
        />
      ),
    },
  ]}
/>

Customized items

The items in the values prop can be can be customized, namely with an icon or custom content on the label prop. Each item can be individually disabled also.

<HvDropdown
  values={[
    { id: "save", label: "Save", icon: <Save /> },
    { id: "export", label: "Export", icon: <Open />, disabled: true },
    {
      id: "preview",
      label: <HvTypography variant="label">Preview</HvTypography>,
      icon: <Preview />,
    },
  ]}
/>

<HvDropdown
  values={[
    { id: "save", label: "Save", icon: <Save /> },
    { id: "export", label: "Export", icon: <Open />, disabled: true },
    {
      id: "preview",
      label: <HvTypography variant="label">Preview</HvTypography>,
      icon: <Preview />,
    },
  ]}
/>

Dropdown

Groups

Customized items

Related components