Menu example:

const ArrowDown = require('../../visuals/Icon/svg/ic_keyboard_arrow_down.svg');
const items = [
  {
    label: '1st action',
    action: () => window.alert('Hooray!'),
    'data-test': 'Hallo',
  },
  {
    label: '2nd action',
    action: () => window.alert("I'm also cool :D"),
  },
  {
    label: '1st link',
    to: 'https://doodle.com',
    'data-xxx': 'Two',
  },
  {
    label: '2nd link (new tab)',
    to: 'https://doodle.com',
    target: '_blank',
  },
];
<Menu items={items} className="AnAdditionalClassName">
  🦄 Open this magic menu!🦄
  <Icon icon={ArrowDown} />
</Menu>;

const ArrowDown = require('../../visuals/Icon/svg/ic_keyboard_arrow_down.svg');
const items = [
  {
    label: 'My polls',
    action: () => window.alert('Sorry, you have no polls :P'),
  },
  {
    label: 'My account',
    action: () => window.alert('Your user has been deleted :('),
  },
  {
    label: 'Log Out',
    to: 'https://doodle.com/logout',
  },
];
<Menu items={items} variant={'blue'}>
  <UserAvatar
    name="Tom"
    avatar="https://6a5edc300520d4037dd6-0732807511066685711db213ddc1d2df.ssl.cf2.rackcdn.com/snw8ceng29ch3zbs4pvro3t2jxswf8yk"
  />
  <Icon icon={ArrowDown} />
</Menu>;

const ArrowDown = require('../../visuals/Icon/svg/ic_keyboard_arrow_down.svg');
const items = [
  {
    label: 'Spanish',
    to: 'https://doodle.com/es/',
  },
  {
    label: 'Catalan',
    to: 'https://doodle.com/ca/',
  },
  {
    label: 'Esperanto',
    to: 'https://doodle.com/',
  },
];
<Menu items={items} variant={'white'}>
  {'English'}
  <Icon icon={ArrowDown} />
</Menu>;

const ArrowUp = require('../../visuals/Icon/svg/ic_keyboard_arrow_up.svg');
const items = [
  {
    label: 'Spanish',
    to: 'https://doodle.com/es/',
  },
  {
    label: 'Catalan',
    to: 'https://doodle.com/ca/',
  },
  {
    label: 'Esperanto',
    to: 'https://doodle.com/',
  },
];
<Menu items={items} variant={'white'} position="top">
  {'English'}
  <Icon icon={ArrowUp} />
</Menu>;

const ArrowDown = require('../../visuals/Icon/svg/ic_keyboard_arrow_down.svg');
const items = [
  {
    label: 'Spanish',
    to: 'https://doodle.com/es/',
  },
  {
    label: 'Catalan',
    to: 'https://doodle.com/ca/',
  },
  {
    label: 'Esperanto',
    to: 'https://doodle.com/',
  },
];
<Menu items={items} variant={'white'} position={'top'}>
  {'English'}
  <Icon icon={ArrowDown} />
</Menu>;

const ArrowDown = require('../../visuals/Icon/svg/ic_keyboard_arrow_down.svg');
const items = [
  {
    label: 'Spanish',
    to: 'https://doodle.com/es/',
  },
  {
    label: 'Catalan',
    to: 'https://doodle.com/ca/',
  },
  {
    label: 'Esperanto',
    to: 'https://doodle.com/',
  },
];
<Menu items={items} variant={'flatAccent'} position={'bottom'}>
  {'English'}
  <Icon icon={ArrowDown} />
</Menu>;

const ArrowDown = require('../../visuals/Icon/svg/ic_keyboard_arrow_down.svg');
const items = [
  {
    label: 'Spanish',
    to: 'https://doodle.com/es/',
  },
  {
    label: 'Catalan',
    to: 'https://doodle.com/ca/',
  },
  {
    label: 'Esperanto',
    to: 'https://doodle.com/',
  },
];
<Menu items={items} variant={'whiteWithBorder'} position={'bottom'} dimension={'compact'}>
  {'Compact'}
  <Icon icon={ArrowDown} />
</Menu>