Dropdown | Mineral UI

Custom Menu

Use the menu render prop to provide custom rendering control of the Menu. See our Render Props Guide for additional information, including important considerations and examples.

Note

The menu in the example below has been customized to include a search input. While neither fully functional nor accessible, it hopefully serves to give the user an idea of something that could be achieved with this technique.

() => {
  const menu = ({ props }) => {
    const Search = styled('div')(({ theme }) => ({
      borderBottom: '1px solid ' + theme.color_gray_40,
      padding: theme.space_inset_md
    }));

    return (
      <div>
        <Search>
          <FormField
            input={TextInput}
            type="search"
            label="Search"
            placeholder="Search..."
            hideLabel
            iconEnd={<IconSearch />} />
        </Search>
        <Menu {...props} />
      </div>
    );
  };

  return (
    <DemoLayout>
      <Dropdown data={data} menu={menu} isOpen>
        <Button>Menu</Button>
      </Dropdown>
    </DemoLayout>
  );
}