Dropdown.jsx

Dropdown = React.createClass({
  componentDidMount() {
    document.addEventListener('click', this.outSideClick, false);
  },
  componentWillUnmount: function () {
    document.removeEventListener('click', this.outSideClick, false);
  },
  outSideClick (event) {
    if (ReactDOM.findDOMNode(this).contains(event.target)) {
      return;
    } else {
      this.setState({
        isOpen : false
      });
    }
  },
  getInitialState () {
    return {
      isOpen : false
    };
  },
  toggleDropdown () {
    this.setState({
      isOpen : !this.state.isOpen
    });
  },
  render () {
    let instance = this;
    return (
      <div className="dropdown">
        {
          React.Children.map(instance.props.children, function (child, index) {
            return React.cloneElement(child, {
              dropdown: instance
            });
          })
        }
      </div>
    );
  }
});

DropdownButton = React.createClass({
  render () {
    let instance = this;
    return (
      <div
        className="dropdown-button"
        onClick={ this.props.dropdown.toggleDropdown }>
        { instance.props.dropdown.state.isOpen && <div className="dropdown-cart"/> }
        {
          instance.props.children
        }
      </div>
    );
  }
});

DropdownList = React.createClass({
  render () {
    let instance = this;
    if(instance.props.dropdown.state.isOpen) {
      return (
        <ul className="dropdown-list">
          {
            React.Children.map(instance.props.children, function (child, index) {
              return React.cloneElement(child, {
                dropdown: instance.props.dropdown
              });
            })
          }
        </ul>
      );
    } else {
      return (
        <div/>
      );
    }
  }
});

DropdownListItem = React.createClass({
  render () {
    let instance = this;
    return (
      <li
        className="list-item"
        onClick={ instance.props.dropdown.toggleDropdown }>
        { instance.props.children }
      </li>
    );
  }
});

Example.jsx

Example = React.createClass({
  render () {
    return (
      <Dropdown>
        <DropdownButton>
          <i className="ion ion-ios-plus-outline create-new">
          </i>
        </DropdownButton>
        <DropdownList>
          <DropdownListItem>
            <a href={ FlowRouter.path('client.card.new') }>
              Create Client
            </a>
          </DropdownListItem>
          <DropdownListItem>
            <a href={ FlowRouter.path('property.card.new') }>
              Create Property
            </a>
          </DropdownListItem>
          <DropdownListItem>
            <a href={ FlowRouter.path('master.contract.card.new') }>
              Create Master Contract
            </a>
          </DropdownListItem>
        </DropdownList>
      </Dropdown>
    ); 
  }
});