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

placement

variant

size

disabled

keepOpened

<HvDropDownMenu 
  placement="right"
  variant="secondaryGhost"
  size="md"
  disabled={false}
  keepOpened={false}
  dataList={[{"label":"Save"},{"label":"Export"},{"label":"Preview"}]}
/>

<HvDropDownMenu 
  placement="right"
  variant="secondaryGhost"
  size="md"
  disabled={false}
  keepOpened={false}
  dataList={[{"label":"Save"},{"label":"Export"},{"label":"Preview"}]}
/>

Customized items

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

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

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

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>
  );
}

Dropdown Empty State