Shadcn NavigationMenu垂直方向失效问题求助

问题重现 #

我尝试使用shadcn的NavigationMenu组件实现垂直堆叠的菜单，已经给NavigationMenu设置了orientation='vertical'属性，但实际渲染后菜单项还是保持水平排列，代码如下：

<div className='container bg-slate-50 p-6'>
  <NavigationMenu orientation='vertical' className='py-10'>
    <NavigationMenuList className='br-5 rounded-lg bg-white p-[50px]'>
      {...components.map((item) => {
        return (
          <NavigationMenuItem className='p-1'>
            <Button variant='secondary'>
              {item.icon}
              <Link href={item.href} className='ml-2'>
                {item.title}
              </Link>
            </Button>
          </NavigationMenuItem>
        );
      })}
    </NavigationMenuList>
  </NavigationMenu>
</div>

实际效果截图：

问题原因及解决方法 #

1. 强制设置NavigationMenuList的垂直布局样式
   shadcn的NavigationMenuList在垂直模式下需要flex-col来实现堆叠，但自定义className可能没有覆盖默认的水平flex样式。直接给NavigationMenuList添加flex-col类：

<NavigationMenuList className='br-5 rounded-lg bg-white p-[50px] flex-col gap-2'>

（gap-2是可选的，用来给菜单项增加垂直间距，优化视觉体验）

2. 检查组件导入与版本
   确认从shadcn/ui正确导入了所有相关组件：NavigationMenu、NavigationMenuList、NavigationMenuItem，同时使用最新版本的组件库——旧版本可能存在垂直布局的样式bug。

3. 优化Button组件适配垂直菜单
   菜单项内的Button默认是水平布局，不会影响菜单堆叠，但可以给Button添加w-full justify-start类，让每个菜单项占满宽度并左对齐，更符合垂直菜单的常规样式：

<Button variant='secondary' className='w-full justify-start'>
  {item.icon}
  <Link href={item.href} className='ml-2'>
    {item.title}
  </Link>
</Button>

4. 排查全局样式冲突
   用浏览器开发者工具查看NavigationMenuList的computed样式，确认flex-direction是否为column。如果不是，说明存在全局样式（比如全局给ul设置了flex-row）覆盖了组件样式，需要针对性修改全局样式或给组件添加更高优先级的类。

内容的提问来源于stack exchange，提问作者Beres