daisyUI Kit 🌼

Menu

DaisyUI 3.0 provides really clean markup for Menus and Submenus.

Code Example 
<Menu class="w-56 bg-base-200 rounded-box">
  <MenuItem><a>Item 1</a></MenuItem>
  <MenuItem><a>Item 2</a></MenuItem>
  <MenuItem><a>Item 3</a></MenuItem>
</Menu>

The Menu components include the following:

The Menu component renders a ul element with a menu class. You can use the following props to configure additional styles:

PropTypeDescription
align
string
Sets the menu alignment to vertical or horizontal
    vertical
boolean
Sets the menu alignment to vertical.
    horizontal
boolean
Sets the menu alignment to horizontal.
size
string
Sets the menu size. Can be set to one of the below size prop names.
    lg
boolean
Sets the menu size to large
    md
boolean
Sets the menu size to medium (the default)
    sm
boolean
Sets the menu size to small
    xs
boolean
Sets the menu size to extra small

MenuTitle renders an li with a menu-title class. It does not have any props,

MenuItem renders an li element. While it's possible to use any content inside, to achieve the "list of menu items" look, place an a or span element inside for correct styling. It can be customized with the following props:

PropTypeDescription
active
boolean
styles the menu item to stand out.
disabled
boolean
styles the menu item to look disabled. Also updates the mouse cursor to show that the action is not allowed.

MenuExpand renders a details element. It can be customized with the following props:

PropTypeDescription
open
boolean
v-model Allows manual control of the open/closed state.
hover
boolean
Opens the dropdown on mouseover. Closes on mouseout.
    delay-enter
number
Changes the hover wait time before the Dropdown opens. default: 0.
    delay-leave
number
Changes the mouseout wait time before the Dropdown closes. default: 400
close-on-click-outside
boolean
Closes the dropdown when clicking outside of the element.

MenuExpandToggle goes inside of a MenuExpand component. It toggles the state of the expand when clicked. It renders a summary element and does not accept any props.

Unstyled Menu

Code Example 
<Menu>
  <MenuItem><a>First Item</a></MenuItem>
  <MenuItem><a>Second Item</a></MenuItem>
  <MenuItem><a>Third Item</a></MenuItem>
</Menu>
Code Example 
<Menu class="w-56 bg-base-200">
  <MenuItem><a>Item 1</a></MenuItem>
  <MenuItem>
    <a class="active">Item 2</a>
  </MenuItem>
  <MenuItem><a>Item 3</a></MenuItem>
</Menu>

Disabled Item

The disabed prop styles the menu item to look disabled.

This prop does not prevent a nested element from being clicked. In the below code example notice that the disabled value is conditionally handled by the setValue function.

1
Code Example 
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(1)

const items = [
  { name: 'Item 1', value: 1 },
  { name: 'Item 2', value: 2, disabled: true },
  { name: 'Item 3', value: 3 },
]

function setValue(item: any, v: number) {
  if (!item.disabled)
    value.value = v
}
</script>

<template>
  <Menu class="w-56 bg-base-200 rounded-box">
    <template v-for="item in items" :key="item.value">
      <MenuItem :disabled="item.disabled">
        <a @click="setValue(item, item.value)">
          {{ item.name }}
        </a>
      </MenuItem>
    </template>
  </Menu>

  <Badge primary>
    {{ value }}
  </Badge>
</template>

Use the size prop or the xs, sm, md, lg props to set the size of the menu. Notice in the example that the MenuTitle must be manually sized to match your specific styles.

Code Example 
<script setup lang="ts">
const menus = [
  { title: 'Extra Small Menu', size: 'xs' },
  { title: 'Small Menu', size: 'sm' },
  { title: 'Medium Menu (Default)', size: 'md' },
  { title: 'Large Menu', size: 'lg' },
] as const
const items = [
  { name: 'Item 1', value: 1 },
  { name: 'Item 2', value: 2 },
  { name: 'Item 3', value: 3 },
]
</script>

<template>
  <Menu v-for="menu in menus" :key="menu.title" class="w-56 bg-base-200 rounded-box" :size="menu.size">
    <MenuTitle>{{ menu.title }}</MenuTitle>
    <MenuItem v-for="item in items" :key="item.value">
      <a>Item 1</a>
    </MenuItem>
  </Menu>
</template>

Responsive Size

This example demonstrates using different size menus on different screen sizes. Drag the handle to see the difference.

Code Example 
<Menu xs class="sm:menu-sm md:menu-md lg:menu-lg w-56 bg-base-200 rounded-box">
  <MenuItem>
    <a>Item 1</a>
  </MenuItem>
  <MenuItem>
    <a>Item 2</a>
  </MenuItem>
  <MenuItem>
    <a>Item 3</a>
  </MenuItem>
</Menu>

Horizontal

Code Example 
<Menu horizontal class="bg-base-200 rounded-box">
  <MenuItem>
    <a>Item 1</a>
  </MenuItem>
  <MenuItem>
    <a>Item 2</a>
  </MenuItem>
  <MenuItem>
    <a>Item 3</a>
  </MenuItem>
</Menu>

With Icons

Code Example 
<Menu class="w-56 bg-base-200 rounded-box">
  <MenuItem>
    <a><Icon name="feather:home" /> Item 1</a>
  </MenuItem>
  <MenuItem>
    <a><Icon name="feather:info" /> Item 2</a>
  </MenuItem>
  <MenuItem>
    <a><Icon name="feather:bar-chart" /> Item 3</a>
  </MenuItem>
</Menu>

Only Icons

Code Example 
<Menu class="bg-base-200 rounded-box">
  <MenuItem>
    <a> <Icon name="feather:home" /> </a>
  </MenuItem>
  <MenuItem>
    <a> <Icon name="feather:info" /> </a>
  </MenuItem>
  <MenuItem>
    <a> <Icon name="feather:bar-chart" /> </a>
  </MenuItem>
</Menu>

Only Icons Horizontal

Code Example 
<Menu horizontal class="bg-base-200 rounded-box">
  <MenuItem>
    <a> <Icon name="feather:home" /> </a>
  </MenuItem>
  <MenuItem>
    <a> <Icon name="feather:info" /> </a>
  </MenuItem>
  <MenuItem>
    <a> <Icon name="feather:bar-chart" /> </a>
  </MenuItem>
</Menu>

Horizontal with Submenu

Code Example 
<Menu horizontal class="bg-base-200">
  <MenuItem><a>Item 1</a></MenuItem>
  <!-- tabindex will make the parent menu focusable to keep the submenu open if it's focused -->
  <MenuItem tabindex="0">
    <span>Parent</span>
    <Menu class="bg-base-200">
      <MenuItem tabindex="0">
        <a>Submenu 1</a>
      </MenuItem>
      <MenuItem tabindex="0">
        <a>Submenu 2</a>
      </MenuItem>
      <MenuItem tabindex="0">
        <a>Submenu 3</a>
      </MenuItem>
    </Menu>
  </MenuItem>
  <MenuItem><a>Item 3</a></MenuItem>
</Menu>

With Custom Color

Code Example 
<Menu class="w-56 p-2 bg-secondary text-secondary-content rounded-box">
  <MenuItem tabindex="0"><a>Item 1</a></MenuItem>
  <MenuItem tabindex="0"><a>Item 2</a></MenuItem>
  <MenuItem tabindex="0"><a>Item 3</a></MenuItem>
</Menu>

Vertical with Submenus

Code Example 
<Menu class="bg-base-200 w-56 rounded-box">
  <MenuItem><a>Item 1</a></MenuItem>
  <MenuItem>
    <a>Parent</a>
    <Menu>
      <MenuItem><a>level 2 item 1</a></MenuItem>
      <MenuItem><a>level 2 item 2</a></MenuItem>
      <MenuItem>
        <a>Parent 2</a>
        <Menu>
          <MenuItem><a>level 3 item 1</a></MenuItem>
          <MenuItem><a>level 3 item 2</a></MenuItem>
        </Menu>
      </MenuItem>
    </Menu>
  </MenuItem>
  <MenuItem><a>Item 3</a></MenuItem>
</Menu>

Vertical Menu With Expandable Submenus

You can create nested menus by placing a Dropdown component inside of MenuItem. Be sure to place a DropdownButton and Menu inside the Dropdown.

Notice that the example uses the close-on-click-outside property on the Dropdown to allow submenus to auto-close when clicking away.

Code Example 
<Menu class="bg-base-200 w-56 rounded-box">
  <MenuItem><a>Item 1</a></MenuItem>
  <MenuItem>
    <MenuExpand open :close-on-click-outside="false">
      <MenuExpandToggle>Parent</MenuExpandToggle>
      <Menu>
        <MenuItem><a>level 2 item 1</a></MenuItem>
        <MenuItem><a>level 2 item 2</a></MenuItem>
        <MenuItem>
          <MenuExpand open :close-on-click-outside="false">
            <MenuExpandToggle>Parent 2</MenuExpandToggle>
            <Menu>
              <MenuItem><a>level 3 item 1</a></MenuItem>
              <MenuItem><a>level 3 item 2</a></MenuItem>
            </Menu>
          </MenuExpand>
        </MenuItem>
      </Menu>
    </MenuExpand>
  </MenuItem>
  <MenuItem><a>Item 3</a></MenuItem>
</Menu>

Vertical Menu with a Dropdown

When using Dropdown, the DropdownContent in DaisyUI Kit will always have position absolute. To make inline dropdowns as shown in the DaisyUI docs, you can use the MenuExpand component, as shown above. A Dropdown will open its content in front of the menu. We have control over its position, so it can open below or to the right, etc.

Code Example 
<Menu class="bg-base-200 w-56 rounded-box">
  <MenuItem><a>Item 1</a></MenuItem>
  <MenuItem>
    <Dropdown placement="right-start">
      <DropdownTarget class="flex justify-between">
        Opens right
        <Icon name="heroicons-solid:arrow-right" class="w-4 h-4 ml-1" />
      </DropdownTarget>
      <DropdownContent class="z-10 bg-base-200 rounded-box">
        <Menu>
          <MenuItem><a>level 2 item 1</a></MenuItem>
          <MenuItem><a>level 2 item 2</a></MenuItem>
        </Menu>
      </DropdownContent>
    </Dropdown>
  </MenuItem>
  <MenuItem>
    <Dropdown>
      <DropdownTarget class="flex justify-between">
        Opens down
        <Icon name="heroicons-solid:arrow-down" class="w-4 h-4 ml-1" />
      </DropdownTarget>
      <DropdownContent class="z-10 bg-base-200 rounded-box">
        <Menu>
          <MenuItem><a>level 2 item 1</a></MenuItem>
          <MenuItem><a>level 2 item 2</a></MenuItem>
        </Menu>
      </DropdownContent>
    </Dropdown>
  </MenuItem>
  <MenuItem><a>Item 3</a></MenuItem>
</Menu>