React Dropdowns

Default Dropdown

import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'muicss/lib/react/dropdown';
import DropdownItem from 'muicss/lib/react/dropdown-item';

class Example extends React.Component {
  render() {
    return (
      <Dropdown color="primary" label="Dropdown">
        <DropdownItem link="#/link1">Option 1</DropdownItem>
        <DropdownItem>Option 2</DropdownItem>
        <DropdownItem>Option 3</DropdownItem>
        <DropdownItem>Option 4</DropdownItem>
      </Dropdown>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Event Handlers

The dropdown component handles onClick and onSelect events.

import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'muicss/lib/react/dropdown';
import DropdownItem from 'muicss/lib/react/dropdown-item';

class Example extends React.Component {
  render() {
    return (
      <Dropdown
        color="primary"
        label="Dropdown"
        onClick={function() {console.log('toggle clicked')}}
        onSelect={function(val) {console.log(val);}}
      >
        <DropdownItem value="option-1">Option 1</DropdownItem>
        <DropdownItem value="option-2">Option 2</DropdownItem>
        <DropdownItem value="option-3">Option 3</DropdownItem>
        <DropdownItem value="option-4">Option 4</DropdownItem>
      </Dropdown>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Menu Placement and Alignment

To set the placement and alignment of the dropdown menu use the placement (down|up|right|left) and alignment (left|right|bottom) attributes.

import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'muicss/lib/react/dropdown';
import DropdownItem from 'muicss/lib/react/dropdown-item';

class Example extends React.Component {
  render() {
    let dropdownItems = [
      <DropdownItem key="1">Option 1</DropdownItem>,
      <DropdownItem key="2">Option 2</DropdownItem>
    ];
    
    return (
      <div>
        <div>
          <Dropdown color="primary" label="Dropdown">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown color="primary" label="Dropdown (right aligned)" alignment="right">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown color="primary" label="Dropup" placement="up">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown color="primary" label="Dropup (right aligned)" placement="up" alignment="right">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown color="primary" label="Dropright" placement="right">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown color="primary" label="Dropright (bottom aligned)" placement="right" alignment="bottom">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown color="primary" label="Dropleft" placement="left">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown color="primary" label="Dropleft (bottom aligned)" placement="left" alignment="bottom">
            {dropdownItems}
          </Dropdown>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Toggle Button

To modify the dropdown toggle button use the color (default|primary|danger|accent), size (default|small|large) and variant (default|flat|raised|fab) attributes.

import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'muicss/lib/react/dropdown';
import DropdownItem from 'muicss/lib/react/dropdown-item';

class Example extends React.Component {
  render() {
    let dropdownItems = [
      <DropdownItem key="1">Option 1</DropdownItem>,
      <DropdownItem key="2">Option 2</DropdownItem>
    ];
    
    return (
      <div>
        <div>
          <Dropdown label="Dropdown" color="default">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" color="primary">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" color="danger">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" color="accent">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" size="default">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" size="small">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" size="large">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" variant="default">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" variant="flat">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="Dropdown" variant="raised">
            {dropdownItems}
          </Dropdown>
        </div>
        <div>
          <Dropdown label="D" variant="fab">
            {dropdownItems}
          </Dropdown>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »
« Previous Next »