daisyUI Navbar 组件实战：从三分区布局到响应式导航栏的完整指南

本文以 daisyUI 官方文档 Navbar 组件文档/components/navbar/+page.md) 为核心骨架，结合 navbar.css 源码与文档站点的前缀替换机制，系统讲解 Navbar 的类名体系、三分区布局原理、十个官方示例（标题栏、菜单子菜单、搜索框、购物车角标、响应式折叠、主题配色等），并深入剖析 $$ 前缀占位符的实现细节。读完本文，你将掌握在 Tailwind CSS 项目中搭建从「仅有标题」到「完整电商导航」再到「多断点响应式」任意形态导航栏的完整实战能力。

Navbar 是什么：页面顶部的导航栏组件

Navbar（导航栏）用于在页面顶部展示导航条。与 menu（菜单）、dropdown（下拉）等组件不同的是，Navbar 本身只负责布局骨架——它是一个基于 Flexbox 的横向容器，导航条内部的按钮、菜单、搜索框、头像、图标等内容全部由其他 daisyUI 组件组合而成。

官方文档通过 YAML frontmatter 声明了 Navbar 的全部类名（组件文档 frontmatter/components/navbar/+page.md#L6-L16)），包括 1 个组件类与 3 个部分（part）类：

类名	类型	说明
navbar	Component	导航栏容器
navbar-start	Part	容器内的 div，占满左侧 50% 宽度
navbar-center	Part	容器内的 div，水平居中
navbar-end	Part	容器内的 div，占满右侧 50% 宽度

文档站点会把这四行类名渲染为带「Component / Part」徽标说明的类名表格（见 layout-components.svelte），读者可以在导航栏文档页顶部直接核对每个类的用途。

三分区布局原理：navbar-start / navbar-center / navbar-end

Navbar 最核心的布局能力来自 navbar-start、navbar-center、navbar-end 三个子容器。源码 navbar.css 完整定义了它们的尺寸规则：

.navbar {
  @apply flex w-full items-center;
  padding: 0.5rem;
  min-height: 4rem;
}

:where(.navbar) {
  @apply relative;
}

.navbar-start {
  @apply inline-flex items-center;
  width: 50%;
  justify-content: flex-start;
}

.navbar-center {
  @apply inline-flex items-center;
  @apply shrink-0;
}

.navbar-end {
  @apply inline-flex items-center;
  width: 50%;
  justify-content: flex-end;
}

从源码可以读出以下关键实现事实：

• .navbar 是 flex + w-full 的横向弹性容器，默认最小高度为 4rem（64px）、内边距为 0.5rem，并配合 :where(.navbar) { position: relative } 建立定位上下文，供内部下拉菜单等绝对定位元素对齐；
• .navbar-start 与 .navbar-end 各占 50% 宽度，分别左对齐（flex-start）与右对齐（flex-end）；
• .navbar-center 不占用固定宽度，通过 shrink-0 防止被压缩，借助 Flex 主轴居中特性水平居中显示。

三者组合出的标准三段式骨架如下：

<div class="navbar bg-base-100 shadow-sm">
  <div class="navbar-start"><!-- 左侧 50%：汉堡菜单等 --></div>
  <div class="navbar-center"><!-- 中间居中：Logo --></div>
  <div class="navbar-end"><!-- 右侧 50%：搜索、头像、通知 --></div>
</div>

在此基础上，navbar 外层通常再叠加 bg-base-100、shadow-sm 等 Tailwind 工具类来提供背景色与阴影，这与文档中所有示例的写法一致。

示例一：仅标题的极简导航栏

最简形态：一个 navbar 容器加一个幽灵按钮（btn btn-ghost）作为品牌标题。

<div class="navbar bg-base-100 shadow-sm">
  <a class="btn btn-ghost text-xl">daisyUI</a>
</div>

要点：btn-ghost 提供无背景、悬停时才出现反馈的按钮外观，text-xl 放大标题字号，非常适合品牌 Logo 位。

示例二：标题 + 右侧图标

利用 flex-1 / flex-none 两个通用工具类分配空间：标题占据剩余宽度，图标按钮不伸缩、固定靠右。

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <button class="btn btn-square btn-ghost">
      <svg aria-label="More" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path> </svg>
    </button>
  </div>
</div>

要点：btn-square 将按钮变为等宽方形，适合放图标；SVG 使用 h-5 w-5 stroke-current 让图标尺寸与颜色跟随上下文。

示例三：首尾各放一个图标的导航栏

汉堡菜单在左、更多操作在右，标题通过 flex-1 撑满中间：

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-none">
    <button class="btn btn-square btn-ghost">
      <svg aria-label="Menu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg>
    </button>
  </div>
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <button class="btn btn-square btn-ghost">
      <svg aria-label="More" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path> </svg>
    </button>
  </div>
</div>

要点：两个 flex-none 图标容器 + 一个 flex-1 标题容器，是「左右图标、中间弹性标题」最常用的写法。

示例四：集成 menu 菜单与子菜单

将 menu 组件水平放置（menu menu-horizontal）进 flex-none 容器，即可得到带链接与子菜单的导航：

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Link</a></li>
      <li>
        <details>
          <summary>Parent</summary>
          <ul class="bg-base-100 rounded-t-none p-2">
            <li><a>Link 1</a></li>
            <li><a>Link 2</a></li>
          </ul>
        </details>
      </li>
    </ul>
  </div>
</div>

要点：

• menu-horizontal 将默认纵向的菜单改为横向（见 menu.css 中的 .menu-horizontal），并使用原生 <details>/<summary> 实现无需 JavaScript 的子菜单展开；
• 子菜单容器用 bg-base-100 rounded-t-none p-2 覆盖默认样式，让下拉面板与导航栏无缝衔接。

示例五：搜索输入框 + 头像下拉菜单

电商/后台类站点最常见形态：左侧标题、中间搜索框、右侧用户头像下拉：

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex gap-2">
    <input type="text" placeholder="Search" class="input w-24 md:w-auto" />
    <div class="dropdown dropdown-end">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
        <div class="w-10 rounded-full">
          <img alt="Tailwind CSS Navbar component" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
        </div>
      </div>
      <ul tabindex="-1" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
        <li>
          <a class="justify-between">
            Profile
            <span class="badge">New</span>
          </a>
        </li>
        <li><a>Settings</a></li>
        <li><a>Logout</a></li>
      </ul>
    </div>
  </div>
</div>

要点：

• 搜索框使用 input 组件类，w-24 md:w-auto 实现「小屏窄、大屏自适应」；
• 头像用 avatar + w-10 rounded-full 裁成圆形；
• dropdown dropdown-end 让下拉面板右对齐（dropdown-end），配合 dropdown-content 定位；z-1 保证面板浮于导航栏之上；
• 下拉内容用 menu menu-sm 排版，badge 在菜单项右侧展示「New」角标。

示例六：购物车角标 + 用户下拉的电商导航

在前一例基础上叠加 indicator（角标）与 card（购物车摘要卡片）两个组件，是电商站点导航的经典组合：

<div class="navbar bg-base-100 shadow-sm">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="flex-none">
    <div class="dropdown dropdown-end">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
        <div class="indicator">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> </svg>
          <span class="badge badge-sm indicator-item">8</span>
        </div>
      </div>
      <div tabindex="0" class="card card-sm dropdown-content bg-base-100 z-1 mt-3 w-52 shadow">
        <div class="card-body">
          <span class="text-lg font-bold">8 Items</span>
          <span class="text-info">Subtotal: $999</span>
          <div class="card-actions">
            <button class="btn btn-primary btn-block">View cart</button>
          </div>
        </div>
      </div>
    </div>
    <div class="dropdown dropdown-end">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
        <div class="w-10 rounded-full">
          <img alt="Tailwind CSS Navbar component" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
        </div>
      </div>
      <ul tabindex="-1" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
        <li>
          <a class="justify-between">
            Profile
            <span class="badge">New</span>
          </a>
        </li>
        <li><a>Settings</a></li>
        <li><a>Logout</a></li>
      </ul>
    </div>
  </div>
</div>

要点：

• indicator 将 badge badge-sm indicator-item 徽标定位到购物车图标的右上角，数字 8 表示商品件数；
• 购物车下拉内容改用 card card-sm + card-body + card-actions 排版：商品数、小计金额（text-info 着色）、btn-primary btn-block 全宽「查看购物车」按钮；
• 多个 dropdown 并排放入同一个 flex-none 容器，即得到「购物车 + 用户」的双下拉导航。

示例七：三分区布局 + 居中 Logo

这一例正式使用 navbar-start / navbar-center / navbar-end 三个 part 类：左侧汉堡下拉、中间 Logo、右侧搜索与通知：

<div class="navbar bg-base-100 shadow-sm">
  <div class="navbar-start">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
        <svg aria-label="Menu" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
      </div>
      <ul tabindex="-1" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
        <li><a>Homepage</a></li>
        <li><a>Portfolio</a></li>
        <li><a>About</a></li>
      </ul>
    </div>
  </div>
  <div class="navbar-center">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="navbar-end">
    <button class="btn btn-ghost btn-circle">
      <svg aria-label="Search" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>
    </button>
    <button class="btn btn-ghost btn-circle">
      <div class="indicator">
        <svg aria-label="Notifications" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>
        <span class="badge badge-xs badge-primary indicator-item"></span>
      </div>
    </button>
  </div>
</div>

要点：

• 这正是前文三分区原理的直接应用：navbar-start（50% 左）、navbar-center（居中收缩）、navbar-end（50% 右，内容靠右）；
• 通知按钮的角标升级为 badge badge-xs badge-primary indicator-item——小号（badge-xs）、主题色（badge-primary）的空心圆点，即「有新通知」的常规表达。

响应式方案一：小屏下拉菜单、大屏水平菜单

这是文档给出的两种响应式方案中的第一种，核心手法是同一份菜单内容按断点切换呈现方式：

<div class="navbar bg-base-100 shadow-sm">
  <div class="navbar-start">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
        <svg aria-label="Menu" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
      </div>
      <ul tabindex="-1" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
        <li><a>Item 1</a></li>
        <li>
          <a>Parent</a>
          <ul class="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="navbar-center hidden lg:flex">
    <ul class="menu menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li>
        <details>
          <summary>Parent</summary>
          <ul class="p-2 bg-base-100 w-40 z-1">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
  <div class="navbar-end">
    <a class="btn">Button</a>
  </div>
</div>

要点：

• 小屏（默认）：汉堡按钮通过 lg:hidden 只在 lg 断点以下显示，点击展开 dropdown 中的竖排 menu menu-sm；
• 大屏（≥lg）：navbar-center 上的 hidden lg:flex 使水平菜单只在 lg 及以上显示，子菜单用 <details>/<summary> 内嵌；
• 文档提示「Resize screen to see changes」，读者可以在组件页面直接缩放窗口验证两种形态的切换。

响应式方案二：小屏折叠（collapse）、大屏完整内容

第二种方案思路不同：用 collapse 组件在小屏把导航栏整体折叠起来，点击汉堡图标后展开全屏菜单；大屏则显示完整内容：

<div class="max-lg:collapse bg-base-200 lg:mb-48 shadow-sm w-full rounded-md">
  <input id="navbar-1-toggle" class="peer hidden" type="checkbox" />
  <label for="navbar-1-toggle" class="fixed inset-0 hidden max-lg:peer-checked:block"></label>
  <div class="collapse-title navbar">
    <div class="navbar-start">
      <label for="navbar-1-toggle" class="btn btn-ghost lg:hidden">
        <svg aria-label="Menu" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
      </label>
      <button class="btn btn-ghost text-xl">daisyUI</button>
    </div>
    <div class="navbar-center hidden lg:flex">
      <ul class="menu menu-horizontal px-1">
        <li><button>Item 1</button></li>
        <li>
          <details>
            <summary>Parent</summary>
            <ul class="p-2 bg-base-100 w-40 z-1">
              <li><button>Submenu 1</button></li>
              <li><button>Submenu 2</button></li>
            </ul>
          </details>
        </li>
        <li><button>Item 3</button></li>
      </ul>
    </div>
    <div class="navbar-end">
      <input type="text" placeholder="Search" class="input w-64 lg:w-auto" />
    </div>
  </div>

  <div class="collapse-content lg:hidden z-1">
    <ul class="menu">
      <li><button>Item 1</button></li>
      <li>
        <button>Parent</button>
        <ul>
          <li><button>Submenu 1</button></li>
          <li><button>Submenu 2</button></li>
        </ul>
      </li>
      <li><button>Item 3</button></li>
    </ul>
  </div>
</div>

要点：

• max-lg:collapse 只在小于 lg 时启用折叠；collapse-title 是始终可见的导航栏头部（内部依然是完整的 navbar + 三分区），collapse-content 是折叠后展开的内容区；
• 折叠开关使用原生 checkbox + peer 联动：<input class="peer hidden" type="checkbox"> 与 <label for="navbar-1-toggle"> 配对，max-lg:peer-checked:block 控制全屏遮罩层的显隐；
• lg:hidden 的汉堡 <label> 充当小屏开关，点击即切换 checkbox 状态，从而展开/收起菜单；大屏时 lg:hidden 的菜单副本隐藏，hidden lg:flex 的水平菜单与搜索框完整呈现。

配色：用 Tailwind 颜色工具类快速换肤

Navbar 本身不定义颜色，背景与文字色完全交给 Tailwind 工具类，因此可以直接接入任意 daisyUI 主题色板：

<div class="navbar bg-neutral text-neutral-content">
  <button class="btn btn-ghost text-xl">daisyUI</button>
</div>

<div class="navbar bg-base-300">
  <button class="btn btn-ghost text-xl">daisyUI</button>
</div>

<div class="navbar bg-primary text-primary-content">
  <button class="btn btn-ghost text-xl">daisyUI</button>
</div>

要点：

• bg-neutral text-neutral-content：中性色导航（深色背景配中性内容色文字）；
• bg-base-300：基准色阶导航（浅色，无需额外文字色）；
• bg-primary text-primary-content：品牌主色导航。

只要主题色变量存在，bg-<color> text-<color>-content 的配对写法就始终成立，这也是 daisyUI 主题体系（packages/daisyui/src/themes/ 下 34 个主题）通用的配色方式。

深入理解代码块中的 $$ 前缀占位符

细心的读者会发现，本文标题下的官方文档源码里，所有 daisyUI 类名都写作 $$navbar、$$btn、$$menu 等。这不是真实类名，而是文档站点的前缀占位符，其机制如下：

1. 官方文档支持为组件类配置自定义前缀（即 docs 配置/docs/config/+page.md) 中提到的 prefix 选项），以规避与业务代码中同名类的冲突；
2. 文档页面把渲染出的代码块交由 actions.svelte.js 处理：node.innerHTML = originalContent.replaceAll("$$", prefixValue)——用当前前缀值（默认空字符串）替换所有 $$；
3. 前缀值保存在 Svelte 的 writable store 中（stores.js），由组件页类名表格旁的 PrefixEdit.svelte 输入框实时修改（prefix– 占位，限制 12 个字符、a-z 与 -）；
4. 类名表格本身也会跟随前缀变化（见 layout-components.svelte），输入前缀后表格与代码示例会同步更新；
5. 仓库还通过测试 missingClassnamePrefix.test.js 强制约束：文档代码块中的 daisyUI 类名必须带 $$ 前缀，防止作者漏写导致前缀替换失效。

因此在你的实际项目中，未配置 prefix 时直接使用 navbar、btn 等类名即可；若在 Tailwind 配置里声明了 daisyui: { prefix: "dui-" }，则所有类名应写作 dui-navbar、dui-btn，与文档站点的 $$ 替换逻辑一一对应。

源码位置速查

• 组件文档源文件：packages/docs/src/routes/(routes)/components/navbar/+page.md/components/navbar/+page.md)（frontmatter 中 source 字段指向组件源码）
• 组件样式源码：packages/daisyui/src/components/navbar.css（三分区布局的权威实现）
• 组合使用的菜单样式：packages/daisyui/src/components/menu.css（menu-horizontal、details/summary 子菜单、menu-sm 等尺寸变体）
• 前缀替换实现：packages/docs/src/lib/actions.svelte.js 与 packages/docs/src/components/PrefixEdit.svelte
• 前缀校验测试：packages/docs/src/lib/scripts/missingClassnamePrefix.test.js

小结

Navbar 是 daisyUI 中「骨架最薄、组合最灵活」的组件：它只提供 navbar + navbar-start/center/end 四类布局能力，真正的导航形态完全由 btn、menu、dropdown、indicator、badge、avatar、card、input、collapse 等组件自由组合而成。本文的十个示例覆盖了从极简标题到电商级购物车导航、再到双方案响应式布局的全部官方场景；理解了 navbar.css 中 50% 宽度与 shrink-0 的三分区规则，以及文档 $$ 前缀的替换机制，你就能在任何 Tailwind 项目中快速搭建符合自己业务形态的导航栏。