Swarm Design System Documentation

Dropdown

An accessible set of components used to compose our dropdown menus.

import { 
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
  MenuLink
  } from '@meetup/swarm-components';

Manage Group Example

<Menu>
  <MenuButton icon="arrow-down" right>
    Manage Group
  </MenuButton>
  <MenuList focusableChildrenTypes={[MenuItem]}>
    <MenuItem onSelect={() => alert("Download")}>Contact Group Members</MenuItem>
    <MenuItem onSelect={() => alert("Copy")}><Edit />Edit Group Settings</MenuItem>
    <MenuItem onSelect={() => alert("Mark as Draft")}>Mark as Draft</MenuItem>
    <MenuLink
      as="a"
      href="https://meetup.com"
    >Meetup</MenuLink>
    <MenuItem onSelect={() => alert("Delete")}>Delete</MenuItem>
  </MenuList>
</Menu>

Create Event Example

<Menu>
  <MenuButton primary icon="arrow-down" right>
    Create Event
  </MenuButton>
  <MenuList focusableChildrenTypes={[MenuItem]}>
    <MenuItem onSelect={() => alert("Download")}>Create New Event</MenuItem>
    <MenuItem onSelect={() => alert("Copy")}>Book as Space</MenuItem>
    <MenuItem onSelect={() => alert("Mark as Draft")}><Edit />Mark as Draft</MenuItem>
    <MenuLink
      as="a"
      href="https://meetup.com"
    >Meetup</MenuLink>
    <MenuItem onSelect={() => alert("Delete")}>Delete</MenuItem>
  </MenuList>
</Menu>

Props

Dropdowns are composed of five components, their props are listed below: