React Dropups

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


Dropup

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="top-end"
            buttonText="Dropup"
            buttonType="outline"
            size="regular"
            rounded={false}
            block={false}
            ripple="dark"
        >
            <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 Dropup

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="top-end"
            buttonText="Rounded Dropup"
            buttonType="outline"
            size="regular"
            rounded={true}
            block={false}
            ripple="dark"
        >
            <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 Dropup

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="top-end"
            buttonText="Small Dropup"
            buttonType="outline"
            size="sm"
            rounded={false}
            block={false}
            ripple="dark"
        >
            <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 Dropup

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="top-end"
            buttonText="Regular Dropup"
            buttonType="outline"
            size="regular"
            rounded={false}
            block={false}
            ripple="dark"
        >
            <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 Dropup

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="top-end"
            buttonText="Large Dropup"
            buttonType="outline"
            size="lg"
            rounded={false}
            block={false}
            ripple="dark"
        >
            <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 Dropup

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="top-end"
            buttonText="Block Level Dropup"
            buttonType="link"
            size="lg"
            rounded={false}
            block={true}
            ripple="dark"
        >
            <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>
    )
}