Next.js+Tailwind项目中@headlessui/react下拉菜单展开溢出问题

问题表现：下拉菜单展开时右侧部分被容器截断，无法完全显示。

问题原因 #

你的代码中外层<div>添加了overflow-hidden类，这个样式会隐藏所有超出该容器范围的内容。而Headless UI的MenuItems组件默认是绝对定位，展开时会超出外层容器的边界，因此被截断导致菜单显示不全。

解决方案 #

直接移除外层div的overflow-hidden类即可：

"use client";

import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
import { FaChevronDown } from "react-icons/fa6";

export default function Dropdown() {
  return (
    <div className="text-right"> {/* 移除了overflow-hidden */}
      <Menu>
        <MenuButton className="text-viking-text inline-flex items-center gap-2 rounded-md bg-transparent py-1.5 px-3 text-sm/6 font-semibold focus:outline-none data-[hover]:bg-viking-950 data-[open]:bg-viking-900 data-[focus]:outline-1 data-[focus]:outline-viking-900">
          Options
          <FaChevronDown className="size-2 fill-viking-text" />
        </MenuButton>

        <MenuItems
          transition
          anchor="bottom end"
          className="w-52 rounded border border-viking-900 bg-white/5 p-1 text-sm/6 text-viking-300 transition duration-100 ease-out [--anchor-gap:var(--spacing-1)] focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0"
        >
          <MenuItem>
            <button className="group flex w-full items-center gap-2 rounded-lg py-1.5 px-3 data-[focus]:bg-white/10">
              Edit
              <kbd className="ml-auto hidden font-sans text-xs text-white/50 group-data-[focus]:inline">
                ⌘E
              </kbd>
            </button>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  );
}

备选方案（需保留overflow-hidden时） #

如果外层容器必须保留overflow-hidden样式处理其他内容，可以给MenuItems添加portal属性，让菜单挂载到DOM根节点（如<body>）下，脱离父容器的溢出限制：

<MenuItems
  portal
  transition
  anchor="bottom end"
  className="w-52 rounded border border-viking-900 bg-white/5 p-1 text-sm/6 text-viking-300 transition duration-100 ease-out [--anchor-gap:var(--spacing-1)] focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0"
>
  {/* 菜单内容 */}
</MenuItems>

内容的提问来源于stack exchange，提问作者Sakhawat Hossain Sohel