DropDownMenu

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

Source Code

uikit-react-core

Customized items

The items in the dataList prop can be customized with icons, custom content on the label prop, separators, and individual disabled states. Use the separator property to add visual separators between logical groups of actions.

import { theme } from "@hitachivantara/uikit-react-core";


export default function Demo() {
  return (
    <HvDropDownMenu
      dataList={[
        { id: "save", label: "Save", icon: <Save /> },
        {
          id: "duplicate",
          label: "Duplicate",
          icon: <Duplicate />,
          separator: true,
        },
        { id: "export", label: "Export", icon: <Open />, disabled: true },
        { id: "share", label: "Share", icon: <Share />, separator: true },
        {
          id: "delete",
          label: (
            <HvTypography
              variant="label"
              style={{ color: theme.colors.negativeStrong }}
            >
              Delete
            </HvTypography>
          ),
          icon: <Delete color={theme.colors.negativeStrong} />,
        },
      ]}
    />
  );
}

import { theme } from "@hitachivantara/uikit-react-core";

export default function Demo() {
  return (
    <HvDropDownMenu
      dataList={[
        { id: "save", label: "Save", icon: <Save /> },
        {
          id: "duplicate",
          label: "Duplicate",
          icon: <Duplicate />,
          separator: true,
        },
        { id: "export", label: "Export", icon: <Open />, disabled: true },
        { id: "share", label: "Share", icon: <Share />, separator: true },
        {
          id: "delete",
          label: (
            <HvTypography
              variant="label"
              style={{ color: theme.colors.negativeStrong }}
            >
              Delete
            </HvTypography>
          ),
          icon: <Delete color={theme.colors.negativeStrong} />,
        },
      ]}
    />
  );
}

Controlled

You can control the open state of the dropdown through the expanded prop.

import { useState } from "react";


export default function Demo() {
  const [open, setOpen] = useState(false);


  return (
    <div className="flex gap-xs">
      <HvButton variant="secondaryGhost" onClick={() => setOpen(!open)}>
        {`Click to ${!open ? "Open" : "Close"}`}
      </HvButton>
      <HvDropDownMenu
        expanded={open}
        onClick={(e, item) => console.log(item.label)}
        disablePortal={false}
        keepOpened={false}
        dataList={[
          { label: "Label 1" },
          { label: "Label 2" },
          { label: "Label 3" },
        ]}
        onToggle={(e, s) => {
          setOpen(s);
        }}
      />
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex gap-xs">
      <HvButton variant="secondaryGhost" onClick={() => setOpen(!open)}>
        {`Click to ${!open ? "Open" : "Close"}`}
      </HvButton>
      <HvDropDownMenu
        expanded={open}
        onClick={(e, item) => console.log(item.label)}
        disablePortal={false}
        keepOpened={false}
        dataList={[
          { label: "Label 1" },
          { label: "Label 2" },
          { label: "Label 3" },
        ]}
        onToggle={(e, s) => {
          setOpen(s);
        }}
      />
    </div>
  );
}