Tailwind CSS Menu - React

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>
  );
}

Nexted 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>
  );
}

Menu Props

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.

AttributeTypeDescriptionDefault
openbooleanMakes the menu open, when menu is controlledundefined
handlerfunctionChange open state for controlled menuundefined
placementPlacementChange menu placementbottom
offsetOffsetChange menu offset from it's handler5
dismissDismissChange dismiss listeners when clicking outsideundefined
animateAnimateChange menu animationundefined
lockScrollbooleanLock page scrolling when menu is openedfalse
childrennodeAdd content for menuNo default value its a required prop.

Menu Handler Props

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.

AttributeTypeDescriptionDefault
childrennodeAdd content for menu handlerNo default value its a required prop.

Menu List Props

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.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for menu list''
childrennodeAdd content for menu listNo default value its a required prop.

Menu Item Props

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.

AttributeTypeDescriptionDefault
disabledbooleanDisable menu itemfalse
classNamestringAdd custom className for menu item''
childrennodeAdd content for menu itemNo default value its a required prop.

Types

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;
};
Edit this page on Github