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.
You can nest one Menu inside another one very easily.
You can change the position of the Menu component using the placement prop.
You can modify the open/close state animation for Menu component using the animate prop.
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.
This example can be used if you want to group the menu items, improving the readability.
Use this simple example of menu with checkboxes if you want to allow users to select multiple options from a list.
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.
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.
Add this menu if you want to group all the notifications in one place, avoiding a cluttered screen.
Are you creating a web app or a mobile app? This component is a must!
The following props are available for menu component. These are the custom props that 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 |
allowHover | boolean | Open the menu when hovering it's handler. | false |
children | node | Add content for menu | No default value it's a required prop. |
For TypeScript Only
import type { MenuProps } from "@material-tailwind/react";The following props are available for menu handler component. These are the custom props that 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 it's a required prop. |
For TypeScript Only
import type { MenuHandlerProps } from "@material-tailwind/react";The following props are available for menu list component. These are the custom props that 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 it's a required prop. |
For TypeScript Only
import type { MenuListProps } from "@material-tailwind/react";The following props are available for menu item component. These are the custom props that 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 it's a required prop. |
For TypeScript Only
import type { MenuItemProps } from "@material-tailwind/react";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 dismissType = {
enabled?: boolean;
escapeKey?: boolean;
referencePress?: boolean;
referencePressEvent?: "pointerdown" | "mousedown" | "click";
outsidePress?: boolean | ((event: MouseEvent) => boolean);
outsidePressEvent?: "pointerdown" | "mousedown" | "click";
ancestorScroll?: boolean;
itemPress?: boolean;
bubbles?:
| boolean
| {
escapeKey?: boolean;
outsidePress?: boolean;
};
};type animate = {
mount?: object;
unmount?: object;
};Learn how to customize the theme and styles for menu components, the theme object for menu components has three main objects:
A. The defaultProps object for setting up the default value for props of menu component.
B. The valid object for customizing the valid values for menu component props.
C. The styles object for customizing the theme and styles of menu component.
You can customize the theme and styles of menu components by adding Tailwind CSS classes as key paired values for objects.
interface MenuStylesType {
defaultProps: {
placement: string;
offset:
| number
| {
mainAxis: number;
crossAxis: number;
alignmentAxis: number;
};
dismiss: {
enabled: boolean;
escapeKey: boolean;
referencePress: boolean;
referencePressEvent: 'pointerdown' | 'mousedown' | 'click';
outsidePress: boolean | ((event: MouseEvent) => boolean);
outsidePressEvent: 'pointerdown' | 'mousedown' | 'click';
ancestorScroll: boolean;
itemPress: boolean;
bubbles: boolean | {
escapeKey: boolean;
outsidePress: boolean;
};
};
animate: {
mount: object;
unmount: object;
};
lockScroll: boolean;
};
styles: {
base: {
menu: object;
item: {
initial: object;
disabled: object;
};
};
};
}For TypeScript Only
import type { MenuStylesType } from "@material-tailwind/react";const theme = {
menu: {
defaultProps: {
placement: "bottom",
offset: 5,
dismiss: {
itemPress: true
},
animate: {
unmount: {},
mount: {},
},
lockScroll: false,
},
styles: {
base: {
menu: {
bg: "bg-white",
minWidth: "min-w-[180px]",
p: "p-3",
border: "border border-blue-gray-50",
borderRadius: "rounded-md",
boxShadow: "shadow-lg shadow-blue-gray-500/10",
fontFamily: "font-sans",
fontSize: "text-sm",
fontWeight: "font-normal",
color: "text-blue-gray-500",
overflow: "overflow-auto",
outline: "focus:outline-none",
zIndex: "z-[999]",
},
item: {
initial: {
display: "block",
width: "w-full",
pt: "pt-[9px]",
pb: "pb-2",
px: "px-3",
borderRadius: "rounded-md",
textAlign: "text-start",
lightHeight: "leading-tight",
cursor: "cursor-pointer",
userSelect: "select-none",
transition: "transition-all",
bg: "hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80",
color: "hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900",
outline: "outline-none",
},
disabled: {
opacity: "opacity-50",
cursor: "cursor-not-allowed",
pointerEvents: "pointer-events-none",
userSelect: "select-none",
bg: "hover:bg-transparent focus:bg-transparent active:bg-transparent",
color: "hover:text-blue-gray-500 focus:text-blue-gray-500 active:text-blue-gray-500",
},
},
},
},
},
};