Dropdown

You can use dropdowns to display accessible contextual overlays for displaying lists of links and more.

Basic Example

You can create dropdowns using the Dropdown component.

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "shards-react";

export default class DropdownExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { open: false };
  }

  toggle() {
    this.setState(prevState => {
      return { open: !prevState.open };
    });
  }

  render() {
    return (
      <Dropdown open={this.state.open} toggle={this.toggle}>
        <DropdownToggle>Dropdown</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Another action</DropdownItem>
          <DropdownItem>Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

Theme Color

Changing the theme color for the DropdownToggle component can be achieved via the theme prop.

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "shards-react";

export default class DropdownThemeExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { open: false };
  }

  toggle() {
    this.setState(prevState => {
      return { open: !prevState.open };
    });
  }

  render() {
    return (
      <Dropdown open={this.state.open} toggle={this.toggle}>
        <DropdownToggle theme="success">Dropdown</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Another action</DropdownItem>
          <DropdownItem>Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

Positioning

By default DropdownMenus are left aligned. However, you can change this by applying a right alignment using the right prop.

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "shards-react";

export default class DropdownPositionExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { open: false };
  }

  toggle() {
    this.setState(prevState => {
      return { open: !prevState.open };
    });
  }

  render() {
    return (
      <Dropdown open={this.state.open} toggle={this.toggle} className="d-table">
        <DropdownToggle>Right Align</DropdownToggle>
        <DropdownMenu right>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Another action</DropdownItem>
          <DropdownItem>Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

Drop-up

Turning dropdown menus into drop-up menus can be easily achieved using the dropup prop applied on the Dropdown component.

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "shards-react";

export default class DropupExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { open: false };
  }

  toggle() {
    this.setState(prevState => {
      return { open: !prevState.open };
    });
  }

  render() {
    return (
      <Dropdown open={this.state.open} toggle={this.toggle} dropup>
        <DropdownToggle>Dropup</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Another action</DropdownItem>
          <DropdownItem>Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

Split Buttons

Using the group prop applied on the Dropdown component and the split prop applied on the DropdownToggle component you can create split-type dropdowns.

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "shards-react";

export default class DropdownSplitExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { open: false };
  }

  toggle() {
    this.setState(prevState => {
      return { open: !prevState.open };
    });
  }

  render() {
    return (
      <Dropdown open={this.state.open} toggle={this.toggle} group>
        <Button>Dropdown</Button>
        <DropdownToggle split />
        <DropdownMenu>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Another action</DropdownItem>
          <DropdownItem>Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

Sizing

Using the size prop on the Dropdown component you can control the dropdown button's size.

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "shards-react";

export default class DropdownSizeExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdown1: false,
      dropdown2: false,
      dropdown3: false
    };
  }

  toggle(nr) {
    this.setState(prevState => {
      const newState = {};
      newState[`dropdown${nr}`] = !prevState[`dropdown${nr}`];
      return { ...prevState, ...newState };
    });
  }

  render() {
    return (
      <div style={{ display: "flex" }}>
        <Dropdown
          open={this.state.dropdown1}
          toggle={() => this.toggle(1)}
          size="lg"
          className="mr-2"
        >
          <DropdownToggle caret>Large</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem>Something else here</DropdownItem>
          </DropdownMenu>
        </Dropdown>

        <Dropdown
          open={this.state.dropdown2}
          toggle={() => this.toggle(2)}
          className="mr-2"
        >
          <DropdownToggle caret>Normal</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem>Something else here</DropdownItem>
          </DropdownMenu>
        </Dropdown>

        <Dropdown
          open={this.state.dropdown3}
          toggle={() => this.toggle(3)}
          size="sm"
          className="mr-2"
        >
          <DropdownToggle caret>Small</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem>Something else here</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    );
  }
}

Props

The following props are available for the Dropdown component.

Prop	Description	Type	Default	Required
open	Whether it is open, or not.	`Bool`	`false`	No
disabled	Whether it is disabled, or not.	`Bool`	-	No
toggle	The toggle function.	`Func`	-	No
inNavbar	Whether it is located inside a navbar, or not.	`Bool`	-	No
dropup	Whether it is a drop-up, or not.	`Bool`	-	No
tag	The component's tag type.	`String`	-	No
nav	Whether it is located inside a Nav, or not.	`Bool`	`false`	No
direction	The direction.	`Enum`	`"down"`	No

Subcomponents

The following subcomponents are available for the Dropdown component.

<DropdownItem/>

Prop	Description	Type	Default	Required
children	The children nodes.	`Node`	-	No
active	Whether it is active, or not.	`Bool`	-	No
disabled	Whether it is disabled, or not.	`Bool`	-	No
divider	Whether it is a divider, or not.	`Bool`	-	No
header	Whether it is a dropdown header item, or not.	`Bool`	-	No
onClick	The function that should be triggered on click.	`Func`	-	No
className	The class name.	`String`	-	No
toggle	Whether it should toggle the dropdown, or not.	`Bool`	`true`	No
tag	The component's tag type.	`FuncString`	`"button"`	No

<DropdownMenu/>

Prop	Description	Type	Default	Required
tag	The component tag.	`String`	`"div"`	No
children	The children nodes.	`Node`	-	Yes
right	Whether it is positioned on the right side, or not.	`Bool`	-	No
flip	Whether it should flip, or not.	`Bool`	`true`	No
small	Whether the dropdown is small, or not.	`Bool`	-	No
modifiers	The modifiers config object.	`Object`	-	No
className	The class name.	`String`	-	No
persist	Whether it should persist, or not.	`Bool`	-	No

<DropdownToggle/>

Prop	Description	Type	Default	Required
caret	Whether it should display a caret, or not.	`Bool`	-	No
theme	The theme color.	`String`	`"primary"`	No
children	The children nodes.	`Node`	-	No
className	The class name.	`String`	-	No
disabled	Whether it is disabled, or not.	`Bool`	-	No
onClick	The function that should be triggered on click.	`Func`	-	No
aria-haspopup	The aria-haspopup attribute.	`Bool`	`true`	No
split	Whether it is split, or not.	`Bool`	-	No
nav	Whether it is located inside a nav, or not.	`Bool`	-	No
tag	The component's tag type.	`FuncString`	-	No