React Dropdowns

Left-aligned (default)

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 »

Right-aligned

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" alignMenu="right">
        <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 »
« Previous Next »