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 variant="gradient">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 NestedMenu() {
return (
<Menu>
<MenuHandler>
<Button variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">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 variant="gradient">Open Menu</Button>
</MenuHandler>
<MenuList>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</MenuList>
</Menu>
);
}