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>
);
}
The following props are available for the menu component. These are the custom props that come with we've added for the menu component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
open | boolean | Makes the menu open, when menu is controlled | undefined |
handler | function | Change open state for controlled menu | undefined |
placement | Placement | Change menu placement | bottom |
offset | Offset | Change menu offset from it's handler | 5 |
dismiss | Dismiss | Change dismiss listeners when clicking outside | undefined |
animate | Animate | Change menu animation | undefined |
lockScroll | boolean | Lock page scrolling when menu is opened | false |
children | node | Add content for menu | No default value its a required prop. |
The following props are available for the menu handler component. These are the custom props that come with we've added for the menu handler component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
children | node | Add content for menu handler | No default value its a required prop. |
The following props are available for the menu list component. These are the custom props that come with we've added for the menu list component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
className | string | Add custom className for menu list | '' |
children | node | Add content for menu list | No default value its a required prop. |
The following props are available for the menu item component. These are the custom props that come with we've added for the menu item component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
disabled | boolean | Disable menu item | false |
className | string | Add custom className for menu item | '' |
children | node | Add content for menu item | No default value its a required prop. |
type placement =
| "top"
| "top-start"
| "top-end"
| "right"
| "right-start"
| "right-end"
| "bottom"
| "bottom-start"
| "bottom-end"
| "left"
| "left-start"
| "left-end";
type offset =
| number
| {
mainAxis?: number;
crossAxis?: number;
alignmentAxis?: number | null;
};
type dismiss = {
enabled?: boolean;
escapeKey?: boolean;
referencePointerDown?: boolean;
outsidePointerDown?: boolean;
ancestorScroll?: boolean;
bubbles?: boolean;
};
type animate = {
mount?: Object;
unmount?: Object;
};