Dropdown

Custom Item

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

The implementation of item used in the following example can be seen in full in the Menu example.

() => {
  const data = [
    {
      avatar: '/images/avatar.svg',
      text: 'Newton',
      work: 'Principia Mathematica'
    },
    {
      avatar: '/images/avatar.svg',
      text: 'Descartes',
      work: 'La Géométrie'
    },
    {
      avatar: '/images/avatar.svg',
      text: 'Euclid',
      work: 'Elements'
    }
  ];

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