React Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Material Tailwind dropdown plugin.


Dropdown

import React from "react";
import Dropdown from "@material-tailwind/react/Dropdown"
import DropdownItem from "@material-tailwind/react/DropdownItem"
import DropdownLink from "@material-tailwind/react/DropdownLink"

export default function Dropdown() {
    return (
        <Dropdown
            color="lightBlue"
            placement="bottom-start"
            buttonText="Dropdown"
            buttonType="filled"
            size="regular"
            rounded={false}
            block={false}
            ripple="light"
        >
            <DropdownItem color="lightBlue" ripple="light">
                Action
            </DropdownItem>
            <DropdownLink
                href="#"
                color={color}
                ripple="light"
                onClick={(e) => e.preventDefault()}
            >
                Another Action
            </DropdownLink>
            <DropdownItem color="lightBlue" ripple="light">
                Something else
            </DropdownItem>
        </Dropdown>
    )
}
 

Rounded Dropdown

import React from "react";
import Dropdown from "@material-tailwind/react/Dropdown"
import DropdownItem from "@material-tailwind/react/DropdownItem"
import DropdownLink from "@material-tailwind/react/DropdownLink"

export default function Dropdown() {
    return (
        <Dropdown
            color="lightBlue"
            placement="bottom-start"
            buttonText="Rounded Dropdown"
            buttonType="filled"
            size="regular"
            rounded={true}
            block={false}
            ripple="light"
        >
            <DropdownItem color="lightBlue" ripple="light">
                Action
            </DropdownItem>
            <DropdownLink
                href="#"
                color={color}
                ripple="light"
                onClick={(e) => e.preventDefault()}
            >
                Another Action
            </DropdownLink>
            <DropdownItem color="lightBlue" ripple="light">
                Something else
            </DropdownItem>
        </Dropdown>
    )
}
 

Small Dropdown

import React from "react";
import Dropdown from "@material-tailwind/react/Dropdown"
import DropdownItem from "@material-tailwind/react/DropdownItem"
import DropdownLink from "@material-tailwind/react/DropdownLink"

export default function Dropdown() {
    return (
        <Dropdown
            color="lightBlue"
            placement="bottom-start"
            buttonText="Small Dropdown"
            buttonType="filled"
            size="sm"
            rounded={false}
            block={false}
            ripple="light"
        >
            <DropdownItem color="lightBlue" ripple="light">
                Action
            </DropdownItem>
            <DropdownLink
                href="#"
                color={color}
                ripple="light"
                onClick={(e) => e.preventDefault()}
            >
                Another Action
            </DropdownLink>
            <DropdownItem color="lightBlue" ripple="light">
                Something else
            </DropdownItem>
        </Dropdown>
    )
}
 

Regular Dropdown

import React from "react";
import Dropdown from "@material-tailwind/react/Dropdown"
import DropdownItem from "@material-tailwind/react/DropdownItem"
import DropdownLink from "@material-tailwind/react/DropdownLink"

export default function Dropdown() {
    return (
        <Dropdown
            color="lightBlue"
            placement="bottom-start"
            buttonText="Regular Dropdown"
            buttonType="filled"
            size="regular"
            rounded={false}
            block={false}
            ripple="light"
        >
            <DropdownItem color="lightBlue" ripple="light">
                Action
            </DropdownItem>
            <DropdownLink
                href="#"
                color={color}
                ripple="light"
                onClick={(e) => e.preventDefault()}
            >
                Another Action
            </DropdownLink>
            <DropdownItem color="lightBlue" ripple="light">
                Something else
            </DropdownItem>
        </Dropdown>
    )
}
 

Large Dropdown

import React from "react";
import Dropdown from "@material-tailwind/react/Dropdown"
import DropdownItem from "@material-tailwind/react/DropdownItem"
import DropdownLink from "@material-tailwind/react/DropdownLink"

export default function Dropdown() {
    return (
        <Dropdown
            color="lightBlue"
            placement="bottom-start"
            buttonText="Large Dropdown"
            buttonType="filled"
            size="lg"
            rounded={false}
            block={false}
            ripple="light"
        >
            <DropdownItem color="lightBlue" ripple="light">
                Action
            </DropdownItem>
            <DropdownLink
                href="#"
                color={color}
                ripple="light"
                onClick={(e) => e.preventDefault()}
            >
                Another Action
            </DropdownLink>
            <DropdownItem color="lightBlue" ripple="light">
                Something else
            </DropdownItem>
        </Dropdown>
    )
}
 

Block Level Dropdown

import React from "react";
import Dropdown from "@material-tailwind/react/Dropdown"
import DropdownItem from "@material-tailwind/react/DropdownItem"
import DropdownLink from "@material-tailwind/react/DropdownLink"

export default function Dropdown() {
    return (
        <Dropdown
            color="lightBlue"
            placement="bottom-start"
            buttonText="Block Level Dropdown"
            buttonType="filled"
            size="lg"
            rounded={false}
            block={true}
            ripple="light"
        >
            <DropdownItem color="lightBlue" ripple="light">
                Action
            </DropdownItem>
            <DropdownLink
                href="#"
                color={color}
                ripple="light"
                onClick={(e) => e.preventDefault()}
            >
                Another Action
            </DropdownLink>
            <DropdownItem color="lightBlue" ripple="light">
                Something else
            </DropdownItem>
        </Dropdown>
    )
}