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.

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.

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.

Attribute	Type	Description	Default
`children`	`node`	Add content for menu handler	No 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.

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.

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.

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.

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

input

navbar

Edit this page on Github