Use our responsive Tailwind CSS vertical Menu
, that can take the user anywhere on your web app!
A Menu
displays a list of choices on temporary surfaces. It appears when users interact with a button, action, or other control. The Menu
also ensures a consistent and predictable user experience by adhering to an established set of principles
See below our Menu
example that you can use in your Tailwind CSS and React project. The example comes in different colors and styles, so you can adapt them easily to your needs.
import {
Menu,
MenuHandler,
MenuList,
MenuItem,
Button,
} from "@material-tailwind/react";
export default function Example() {
return (
<Menu>
<MenuHandler>
<Button>Open Menu</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
);
}
You can nest one Menu
inside another one very easily.
import {
Menu,
MenuHandler,
MenuList,
MenuItem,
Button,
} from "@material-tailwind/react";
export default function Example() {
return (
<Menu>
<MenuHandler>
<Button>Open Nested Menu</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<Menu placement="right-start" offset={15}>
<MenuHandler>
<MenuItem>Nested Item</MenuItem>
</MenuHandler>
<MenuList>
<MenuItem>Nested Item 1</MenuItem>
<MenuItem>Nested Item 2</MenuItem>
<MenuItem>Nested Item 3</MenuItem>
</MenuList>
</Menu>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
);
}
You can change the position of the Menu
component using the placement
prop.
import { Fragment } from "react";
import {
Menu,
MenuHandler,
MenuList,
MenuItem,
Button,
} from "@material-tailwind/react";
export default function Example() {
return (
<Fragment>
<div className="mb-3 flex gap-3">
<Menu placement="top">
<MenuHandler>
<Button>Top</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
<Menu placement="top-start">
<MenuHandler>
<Button>Top Start</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
<Menu placement="top-end">
<MenuHandler>
<Button>Top End</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
</div>
<div className="mb-3 flex gap-3">
<Menu placement="right">
<MenuHandler>
<Button>Right</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
<Menu placement="right-start">
<MenuHandler>
<Button>Right Start</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
<Menu placement="right-end">
<MenuHandler>
<Button>Right End</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
</div>
<div className="mb-3 flex gap-3">
<Menu placement="bottom">
<MenuHandler>
<Button>Bottom</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
<Menu placement="bottom-start">
<MenuHandler>
<Button>Bottom Start</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
<Menu placement="bottom-end">
<MenuHandler>
<Button>Bottom End</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
</div>
<div className="flex gap-3">
<Menu placement="left">
<MenuHandler>
<Button>Left</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
<Menu placement="left-start">
<MenuHandler>
<Button>Left Start</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
<Menu placement="left-end">
<MenuHandler>
<Button>Left End</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
</div>
</Fragment>
);
}
You can modify the open/close state animation for Menu
component using the animate
prop.
import {
Menu,
MenuHandler,
MenuList,
MenuItem,
Button,
} from "@material-tailwind/react";
export default function Example() {
return (
<Menu
animate={{
mount: { y: 0 },
unmount: { y: 25 },
}}
>
<MenuHandler>
<Button>Open Menu</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
);
}
Use this menu example if you want to allow your users to navigate to another page in a visually appealing way. This component includes an image, clickable headline, and description.
import React from "react";
import {
Menu,
MenuHandler,
MenuList,
MenuItem,
Button,
Card,
Typography,
} from "@material-tailwind/react";
import { ChevronDownIcon, RocketLaunchIcon } from "@heroicons/react/24/outline";
const menuItems = [
{
title: "@material-tailwind/html",
description:
"Learn how to use @material-tailwind/html, packed with rich components and widgets.",
},
{
title: "@material-tailwind/react",
description:
"Learn how to use @material-tailwind/react, packed with rich components for React.",
},
{
title: "Material Tailwind PRO",
description:
"A complete set of UI Elements for building faster websites in less time.",
},
];
export default function Day09() {
const [openMenu, setOpenMenu] = React.useState(false);
const triggers = {
onMouseEnter: () => setOpenMenu(true),
onMouseLeave: () => setOpenMenu(false),
};
return (
<Menu open={openMenu} handler={setOpenMenu}>
<MenuHandler>
<Button
{...triggers}
variant="text"
className="flex items-center gap-3 text-base font-normal capitalize tracking-normal"
>
Technology{" "}
<ChevronDownIcon
strokeWidth={2.5}
className={`h-3.5 w-3.5 transition-transform ${
openMenu ? "rotate-180" : ""
}`}
/>
</Button>
</MenuHandler>
<MenuList
{...triggers}
className="hidden w-[36rem] grid-cols-7 gap-3 overflow-visible lg:grid"
>
<Card
color="blue"
shadow={false}
variant="gradient"
className="col-span-3 grid h-full w-full place-items-center rounded-md"
>
<RocketLaunchIcon strokeWidth={1} className="h-28 w-28" />
</Card>
<ul className="col-span-4 flex w-full flex-col gap-1">
{menuItems.map(({ title, description }) => (
<a href="#" key={title}>
<MenuItem>
<Typography variant="h6" color="blue-gray" className="mb-1">
{title}
</Typography>
<Typography
variant="small"
color="gray"
className="font-normal"
>
{description}
</Typography>
</MenuItem>
</a>
))}
</ul>
</MenuList>
</Menu>
);
}
This example can be used if you want to group the menu items, improving the readability.
import {
Menu,
MenuHandler,
MenuList,
MenuItem,
Button,
} from "@material-tailwind/react";
export default function Example() {
return (
<Menu>
<MenuHandler>
<Button>Open Menu</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
<hr className="my-3" />
<MenuItem>Menu Item 4</MenuItem>
</MenuList>
</Menu>
);
}
Use this simple example of menu with checkboxes if you want to allow users to select multiple options from a list.
import {
Menu,
MenuHandler,
Button,
MenuList,
MenuItem,
Checkbox,
} from "@material-tailwind/react";
export default function Example() {
return (
<Menu
dismiss={{
itemPress: false,
}}
>
<MenuHandler>
<Button>Open Menu</Button>
</MenuHandler>
<MenuList>
<MenuItem className="p-0">
<label
htmlFor="item-1"
className="flex cursor-pointer items-center gap-2 p-2"
>
<Checkbox
ripple={false}
id="item-1"
containerProps={{ className: "p-0" }}
className="hover:before:content-none"
/>
Menu Item 1
</label>
</MenuItem>
<MenuItem className="p-0">
<label
htmlFor="item-2"
className="flex cursor-pointer items-center gap-2 p-2"
>
<Checkbox
ripple={false}
id="item-2"
containerProps={{ className: "p-0" }}
className="hover:before:content-none"
/>
Menu Item 2
</label>
</MenuItem>
<MenuItem className="p-0">
<label
htmlFor="item-3"
className="flex cursor-pointer items-center gap-2 p-2"
>
<Checkbox
ripple={false}
id="item-3"
containerProps={{ className: "p-0" }}
className="hover:before:content-none"
/>
Menu Item 3
</label>
</MenuItem>
</MenuList>
</Menu>
);
}
This example is perfect if you have more options. Use it to let the users find easier what they are looking for, without scrolling too much.
import {
Menu,
MenuHandler,
Button,
MenuList,
MenuItem,
Input,
} from "@material-tailwind/react";
export default function Example() {
return (
<Menu
dismiss={{
itemPress: false,
}}
>
<MenuHandler>
<Button>Open Menu</Button>
</MenuHandler>
<MenuList>
<Input
label="Search"
containerProps={{
className: "mb-4",
}}
/>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
);
}
You can use this example if you have more options in the list, so that the users can see all of them. If you have more that 10 options, we recommend you use the search input from the previous example.
import {
Menu,
MenuHandler,
Button,
MenuList,
MenuItem,
} from "@material-tailwind/react";
export default function Example() {
return (
<Menu>
<MenuHandler>
<Button>Open Menu</Button>
</MenuHandler>
<MenuList className="max-h-72">
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
<MenuItem>Menu Item 4</MenuItem>
<MenuItem>Menu Item 5</MenuItem>
<MenuItem>Menu Item 6</MenuItem>
<MenuItem>Menu Item 7</MenuItem>
<MenuItem>Menu Item 8</MenuItem>
<MenuItem>Menu Item 9</MenuItem>
<MenuItem>Menu Item 10</MenuItem>
<MenuItem>Menu Item 11</MenuItem>
<MenuItem>Menu Item 12</MenuItem>
<MenuItem>Menu Item 13</MenuItem>
<MenuItem>Menu Item 14</MenuItem>
<MenuItem>Menu Item 15</MenuItem>
<MenuItem>Menu Item 16</MenuItem>
<MenuItem>Menu Item 17</MenuItem>
<MenuItem>Menu Item 18</MenuItem>
<MenuItem>Menu Item 19</MenuItem>
<MenuItem>Menu Item 20</MenuItem>
</MenuList>
</Menu>
);
}
Add this menu if you want to group all the notifications in one place, avoiding a cluttered screen.
import {
Menu,
MenuHandler,
MenuList,
MenuItem,
IconButton,
Avatar,
Typography,
} from "@material-tailwind/react";
import { BellIcon } from "@heroicons/react/24/solid";
import { ClockIcon } from "@heroicons/react/24/outline";
export default function Day10() {
return (
<Menu>
<MenuHandler>
<IconButton variant="text">
<BellIcon className="h-5 w-5" />
</IconButton>
</MenuHandler>
<MenuList className="flex flex-col gap-2">
<MenuItem className="flex items-center gap-4 py-2 pr-8 pl-2">
<Avatar
variant="circular"
alt="candice wu"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
/>
<div className="flex flex-col gap-1">
<Typography variant="small" color="gray" className="font-normal">
<span className="font-medium text-blue-gray-900">Wu</span> send
you a message
</Typography>
<Typography
variant="small"
className="flex items-center gap-1 text-xs text-gray-600"
>
<ClockIcon className="h-3 w-3" />
13 minutes ago
</Typography>
</div>
</MenuItem>
<MenuItem className="flex items-center gap-4 py-2 pr-8 pl-2">
<Avatar
variant="circular"
alt="natali craig"
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1061&q=80"
/>
<div className="flex flex-col gap-1">
<Typography variant="small" color="gray" className="font-normal">
<span className="font-medium text-blue-gray-900">Natali</span>{" "}
reply to your email
</Typography>
<Typography
variant="small"
className="flex items-center gap-1 text-xs text-gray-600"
>
<ClockIcon className="h-3 w-3" />a hour ago
</Typography>
</div>
</MenuItem>
<MenuItem className="flex items-center gap-4 py-2 pr-8 pl-2">
<Avatar
variant="circular"
alt="paypal"
src="https://dwglogo.com/wp-content/uploads/2016/08/PayPal_Logo_Icon.png"
/>
<div className="flex flex-col gap-1">
<Typography variant="small" color="gray" className="font-normal">
<span className="font-medium text-blue-gray-900">PayPal</span>{" "}
you've received a payment.
</Typography>
<Typography
variant="small"
className="flex items-center gap-1 text-xs text-gray-600"
>
<ClockIcon className="h-3 w-3" />5 hours ago
</Typography>
</div>
</MenuItem>
</MenuList>
</Menu>
);
}
Are you creating a web app or a mobile app? This component is a must!
import {
Menu,
MenuHandler,
MenuList,
MenuItem,
Avatar,
Typography,
} from "@material-tailwind/react";
import {
Cog6ToothIcon,
PowerIcon,
InboxArrowDownIcon,
UserCircleIcon,
LifebuoyIcon,
} from "@heroicons/react/24/outline";
export default function Example() {
return (
<Menu>
<MenuHandler>
<Avatar
variant="circular"
alt="candice wu"
className="cursor-pointer"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
/>
</MenuHandler>
<MenuList>
<MenuItem className="flex items-center gap-2">
<UserCircleIcon strokeWidth={2} className="h-4 w-4" />
<Typography variant="small" className="font-normal">
My Profile
</Typography>
</MenuItem>
<MenuItem className="flex items-center gap-2">
<Cog6ToothIcon strokeWidth={2} className="h-4 w-4" />
<Typography variant="small" className="font-normal">
Edit Profile
</Typography>
</MenuItem>
<MenuItem className="flex items-center gap-2">
<InboxArrowDownIcon strokeWidth={2} className="h-4 w-4" />
<Typography variant="small" className="font-normal">
Inbox
</Typography>
</MenuItem>
<MenuItem className="flex items-center gap-2">
<LifebuoyIcon strokeWidth={2} className="h-4 w-4" />
<Typography variant="small" className="font-normal">
Help
</Typography>
</MenuItem>
<hr className="my-2 border-blue-gray-50" />
<MenuItem className="flex items-center gap-2 ">
<PowerIcon strokeWidth={2} className="h-4 w-4" />
<Typography variant="small" className="font-normal">
Sign Out
</Typography>
</MenuItem>
</MenuList>
</Menu>
);
}