导航菜单中使用多个<NavigationMenuList>组件是否可行？

关于多个<NavigationMenuList>的使用 #

当然可以使用多个<NavigationMenuList>组件。shadcn的NavigationMenu基于Radix UI的组件，Radix本身允许在根组件下放置多个列表容器，只要通过Flex布局控制好它们的排列和空间分配就行，这种方式不用额外嵌套多余的div，更贴合组件本身的结构逻辑。

方案1：用多个<NavigationMenuList>实现目标布局 #

给<NavigationMenu>设置flex布局，让三个列表分别对应左、中、右区域，中间列表占满剩余空间：

import { NavigationMenu, NavigationMenuList, NavigationMenuItem } from "@/components/ui/navigation-menu"
import Link from "next/link"
import { Form } from "@/components/ui/form"

export default function Navbar() {
  return (
    <NavigationMenu className="main-navbar max-w-none flex items-center w-full">
      {/* 左侧Logo区 */}
      <NavigationMenuList className="flex items-center">
        <NavigationMenuItem>
          <Link href="/" className="text-emerald-800">Logo</Link>
        </NavigationMenuItem>
      </NavigationMenuList>

      {/* 中间搜索栏，占剩余空间并居中 */}
      <NavigationMenuList className="flex-1 flex justify-center">
        <NavigationMenuItem className="w-full max-w-md">
          <Form action="/live-search-product" className="w-full">
            <input 
              type="text" 
              name="search" 
              className="w-full px-4 py-2 border rounded-md"
              placeholder="搜索产品..."
            />
          </Form>
        </NavigationMenuItem>
      </NavigationMenuList>

      {/* 右侧链接组 */}
      <NavigationMenuList className="flex items-center gap-6">
        <NavigationMenuItem>
          <Link href="/link1" className="text-emerald-800">Link1</Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href="/link2" className="text-emerald-800">Link2</Link>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href="/link3" className="text-emerald-800">Link3</Link>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

方案2：单个<NavigationMenuList>配合分组div（更简洁） #

如果不想用多个列表，也可以在单个列表里用div分组，通过Flex控制空间分配，效果一致：

import { NavigationMenu, NavigationMenuList, NavigationMenuItem } from "@/components/ui/navigation-menu"
import Link from "next/link"
import { Form } from "@/components/ui/form"

export default function Navbar() {
  return (
    <NavigationMenu className="main-navbar max-w-none">
      <NavigationMenuList className="flex items-center w-full">
        {/* 左侧Logo */}
        <div className="flex items-center">
          <NavigationMenuItem>
            <Link href="/" className="text-emerald-800">Logo</Link>
          </NavigationMenuItem>
        </div>

        {/* 中间搜索栏，占剩余空间并居中 */}
        <div className="flex-1 flex justify-center">
          <NavigationMenuItem className="w-full max-w-md">
            <Form action="/live-search-product" className="w-full">
              <input 
                type="text" 
                name="search" 
                className="w-full px-4 py-2 border rounded-md"
                placeholder="搜索产品..."
              />
            </Form>
          </NavigationMenuItem>
        </div>

        {/* 右侧链接组 */}
        <div className="flex items-center gap-6">
          <NavigationMenuItem>
            <Link href="/link1" className="text-emerald-800">Link1</Link>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <Link href="/link2" className="text-emerald-800">Link2</Link>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <Link href="/link3" className="text-emerald-800">Link3</Link>
          </NavigationMenuItem>
        </div>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

布局关键要点 #

• 给根组件或列表设置flex items-center w-full，确保横向排列且占满整个宽度
• 中间区域添加flex-1属性，让它自动占据剩余空间，再用justify-center让搜索栏居中显示
• 右侧链接组用gap-6（可按需调整数值）设置链接之间的间距，保证布局美观

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