daisyUI Navbar 组件实战从三分区布局到响应式导航栏的完整指南【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui本文以 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类类名类型说明navbarComponent导航栏容器navbar-startPart容器内的 div占满左侧 50% 宽度navbar-centerPart容器内的 div水平居中navbar-endPart容器内的 div占满右侧 50% 宽度文档站点会把这四行类名渲染为带「Component / Part」徽标说明的类名表格见 layout-components.svelte读者可以在导航栏文档页顶部直接核对每个类的用途。三分区布局原理navbar-start / navbar-center / navbar-endNavbar 最核心的布局能力来自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是flexw-full的横向弹性容器默认最小高度为4rem64px、内边距为0.5rem并配合:where(.navbar) { position: relative }建立定位上下文供内部下拉菜单等绝对定位元素对齐.navbar-start与.navbar-end各占 50% 宽度分别左对齐flex-start与右对齐flex-end.navbar-center不占用固定宽度通过shrink-0防止被压缩借助 Flex 主轴居中特性水平居中显示。三者组合出的标准三段式骨架如下div classnavbar bg-base-100 shadow-sm div classnavbar-start!-- 左侧 50%汉堡菜单等 --/div div classnavbar-center!-- 中间居中Logo --/div div classnavbar-end!-- 右侧 50%搜索、头像、通知 --/div /div在此基础上navbar外层通常再叠加bg-base-100、shadow-sm等 Tailwind 工具类来提供背景色与阴影这与文档中所有示例的写法一致。示例一仅标题的极简导航栏最简形态一个navbar容器加一个幽灵按钮btn btn-ghost作为品牌标题。div classnavbar bg-base-100 shadow-sm a classbtn btn-ghost text-xldaisyUI/a /div要点btn-ghost提供无背景、悬停时才出现反馈的按钮外观text-xl放大标题字号非常适合品牌 Logo 位。示例二标题 右侧图标利用flex-1/flex-none两个通用工具类分配空间标题占据剩余宽度图标按钮不伸缩、固定靠右。div classnavbar bg-base-100 shadow-sm div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex-none button classbtn btn-square btn-ghost svg aria-labelMore xmlnshttp://www.w3.org/2000/svg fillnone viewBox0 0 24 24 classinline-block h-5 w-5 stroke-current path stroke-linecapround stroke-linejoinround stroke-width2 dM5 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 classnavbar bg-base-100 shadow-sm div classflex-none button classbtn btn-square btn-ghost svg aria-labelMenu xmlnshttp://www.w3.org/2000/svg fillnone viewBox0 0 24 24 classinline-block h-5 w-5 stroke-current path stroke-linecapround stroke-linejoinround stroke-width2 dM4 6h16M4 12h16M4 18h16/path /svg /button /div div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex-none button classbtn btn-square btn-ghost svg aria-labelMore xmlnshttp://www.w3.org/2000/svg fillnone viewBox0 0 24 24 classinline-block h-5 w-5 stroke-current path stroke-linecapround stroke-linejoinround stroke-width2 dM5 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 classnavbar bg-base-100 shadow-sm div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex-none ul classmenu menu-horizontal px-1 liaLink/a/li li details summaryParent/summary ul classbg-base-100 rounded-t-none p-2 liaLink 1/a/li liaLink 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 classnavbar bg-base-100 shadow-sm div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex gap-2 input typetext placeholderSearch classinput w-24 md:w-auto / div classdropdown dropdown-end div tabindex0 rolebutton classbtn btn-ghost btn-circle avatar div classw-10 rounded-full img altTailwind CSS Navbar component srchttps://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp / /div /div ul tabindex-1 classmenu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow li a classjustify-between Profile span classbadgeNew/span /a /li liaSettings/a/li liaLogout/a/li /ul /div /div /div要点搜索框使用input组件类w-24 md:w-auto实现「小屏窄、大屏自适应」头像用avatarw-10 rounded-full裁成圆形dropdown dropdown-end让下拉面板右对齐dropdown-end配合dropdown-content定位z-1保证面板浮于导航栏之上下拉内容用menu menu-sm排版badge在菜单项右侧展示「New」角标。示例六购物车角标 用户下拉的电商导航在前一例基础上叠加indicator角标与card购物车摘要卡片两个组件是电商站点导航的经典组合div classnavbar bg-base-100 shadow-sm div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex-none div classdropdown dropdown-end div tabindex0 rolebutton classbtn btn-ghost btn-circle div classindicator svg xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM3 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 classbadge badge-sm indicator-item8/span /div /div div tabindex0 classcard card-sm dropdown-content bg-base-100 z-1 mt-3 w-52 shadow div classcard-body span classtext-lg font-bold8 Items/span span classtext-infoSubtotal: $999/span div classcard-actions button classbtn btn-primary btn-blockView cart/button /div /div /div /div div classdropdown dropdown-end div tabindex0 rolebutton classbtn btn-ghost btn-circle avatar div classw-10 rounded-full img altTailwind CSS Navbar component srchttps://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp / /div /div ul tabindex-1 classmenu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow li a classjustify-between Profile span classbadgeNew/span /a /li liaSettings/a/li liaLogout/a/li /ul /div /div /div要点indicator将badge badge-sm indicator-item徽标定位到购物车图标的右上角数字 8 表示商品件数购物车下拉内容改用card card-smcard-bodycard-actions排版商品数、小计金额text-info着色、btn-primary btn-block全宽「查看购物车」按钮多个dropdown并排放入同一个flex-none容器即得到「购物车 用户」的双下拉导航。示例七三分区布局 居中 Logo这一例正式使用navbar-start/navbar-center/navbar-end三个 part 类左侧汉堡下拉、中间 Logo、右侧搜索与通知div classnavbar bg-base-100 shadow-sm div classnavbar-start div classdropdown div tabindex0 rolebutton classbtn btn-ghost btn-circle svg aria-labelMenu xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM4 6h16M4 12h16M4 18h7 / /svg /div ul tabindex-1 classmenu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow liaHomepage/a/li liaPortfolio/a/li liaAbout/a/li /ul /div /div div classnavbar-center a classbtn btn-ghost text-xldaisyUI/a /div div classnavbar-end button classbtn btn-ghost btn-circle svg aria-labelSearch xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z / /svg /button button classbtn btn-ghost btn-circle div classindicator svg aria-labelNotifications xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM15 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 classbadge badge-xs badge-primary indicator-item/span /div /button /div /div要点这正是前文三分区原理的直接应用navbar-start50% 左、navbar-center居中收缩、navbar-end50% 右内容靠右通知按钮的角标升级为badge badge-xs badge-primary indicator-item——小号badge-xs、主题色badge-primary的空心圆点即「有新通知」的常规表达。响应式方案一小屏下拉菜单、大屏水平菜单这是文档给出的两种响应式方案中的第一种核心手法是同一份菜单内容按断点切换呈现方式div classnavbar bg-base-100 shadow-sm div classnavbar-start div classdropdown div tabindex0 rolebutton classbtn btn-ghost lg:hidden svg aria-labelMenu xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM4 6h16M4 12h8m-8 6h16 / /svg /div ul tabindex-1 classmenu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow liaItem 1/a/li li aParent/a ul classp-2 liaSubmenu 1/a/li liaSubmenu 2/a/li /ul /li liaItem 3/a/li /ul /div a classbtn btn-ghost text-xldaisyUI/a /div div classnavbar-center hidden lg:flex ul classmenu menu-horizontal px-1 liaItem 1/a/li li details summaryParent/summary ul classp-2 bg-base-100 w-40 z-1 liaSubmenu 1/a/li liaSubmenu 2/a/li /ul /details /li liaItem 3/a/li /ul /div div classnavbar-end a classbtnButton/a /div /div要点小屏默认汉堡按钮通过lg:hidden只在lg断点以下显示点击展开dropdown中的竖排menu menu-sm大屏≥lgnavbar-center上的hidden lg:flex使水平菜单只在lg及以上显示子菜单用details/summary内嵌文档提示「Resize screen to see changes」读者可以在组件页面直接缩放窗口验证两种形态的切换。响应式方案二小屏折叠collapse、大屏完整内容第二种方案思路不同用collapse组件在小屏把导航栏整体折叠起来点击汉堡图标后展开全屏菜单大屏则显示完整内容div classmax-lg:collapse bg-base-200 lg:mb-48 shadow-sm w-full rounded-md input idnavbar-1-toggle classpeer hidden typecheckbox / label fornavbar-1-toggle classfixed inset-0 hidden max-lg:peer-checked:block/label div classcollapse-title navbar div classnavbar-start label fornavbar-1-toggle classbtn btn-ghost lg:hidden svg aria-labelMenu xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColorpath stroke-linecapround stroke-linejoinround stroke-width2 dM4 6h16M4 12h8m-8 6h16 //svg /label button classbtn btn-ghost text-xldaisyUI/button /div div classnavbar-center hidden lg:flex ul classmenu menu-horizontal px-1 libuttonItem 1/button/li li details summaryParent/summary ul classp-2 bg-base-100 w-40 z-1 libuttonSubmenu 1/button/li libuttonSubmenu 2/button/li /ul /details /li libuttonItem 3/button/li /ul /div div classnavbar-end input typetext placeholderSearch classinput w-64 lg:w-auto / /div /div div classcollapse-content lg:hidden z-1 ul classmenu libuttonItem 1/button/li li buttonParent/button ul libuttonSubmenu 1/button/li libuttonSubmenu 2/button/li /ul /li libuttonItem 3/button/li /ul /div /div要点max-lg:collapse只在小于lg时启用折叠collapse-title是始终可见的导航栏头部内部依然是完整的navbar 三分区collapse-content是折叠后展开的内容区折叠开关使用原生 checkbox peer 联动input classpeer hidden typecheckbox与label fornavbar-1-toggle配对max-lg:peer-checked:block控制全屏遮罩层的显隐lg:hidden的汉堡label充当小屏开关点击即切换 checkbox 状态从而展开/收起菜单大屏时lg:hidden的菜单副本隐藏hidden lg:flex的水平菜单与搜索框完整呈现。配色用 Tailwind 颜色工具类快速换肤Navbar 本身不定义颜色背景与文字色完全交给 Tailwind 工具类因此可以直接接入任意 daisyUI 主题色板div classnavbar bg-neutral text-neutral-content button classbtn btn-ghost text-xldaisyUI/button /div div classnavbar bg-base-300 button classbtn btn-ghost text-xldaisyUI/button /div div classnavbar bg-primary text-primary-content button classbtn btn-ghost text-xldaisyUI/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等。这不是真实类名而是文档站点的前缀占位符其机制如下官方文档支持为组件类配置自定义前缀即 docs 配置/docs/config/page.md) 中提到的prefix选项以规避与业务代码中同名类的冲突文档页面把渲染出的代码块交由 actions.svelte.js 处理node.innerHTML originalContent.replaceAll($$, prefixValue)——用当前前缀值默认空字符串替换所有$$前缀值保存在 Svelte 的writablestore 中stores.js由组件页类名表格旁的 PrefixEdit.svelte 输入框实时修改prefix–占位限制 12 个字符、a-z与-类名表格本身也会跟随前缀变化见 layout-components.svelte输入前缀后表格与代码示例会同步更新仓库还通过测试 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.cssmenu-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 中「骨架最薄、组合最灵活」的组件它只提供navbarnavbar-start/center/end四类布局能力真正的导航形态完全由btn、menu、dropdown、indicator、badge、avatar、card、input、collapse等组件自由组合而成。本文的十个示例覆盖了从极简标题到电商级购物车导航、再到双方案响应式布局的全部官方场景理解了navbar.css中 50% 宽度与shrink-0的三分区规则以及文档$$前缀的替换机制你就能在任何 Tailwind 项目中快速搭建符合自己业务形态的导航栏。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 daisyUI Navbar 组件实战：从三分区布局到响应式导航栏的完整指南
daisyUI Navbar 组件实战从三分区布局到响应式导航栏的完整指南【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui本文以 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类类名类型说明navbarComponent导航栏容器navbar-startPart容器内的 div占满左侧 50% 宽度navbar-centerPart容器内的 div水平居中navbar-endPart容器内的 div占满右侧 50% 宽度文档站点会把这四行类名渲染为带「Component / Part」徽标说明的类名表格见 layout-components.svelte读者可以在导航栏文档页顶部直接核对每个类的用途。三分区布局原理navbar-start / navbar-center / navbar-endNavbar 最核心的布局能力来自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是flexw-full的横向弹性容器默认最小高度为4rem64px、内边距为0.5rem并配合:where(.navbar) { position: relative }建立定位上下文供内部下拉菜单等绝对定位元素对齐.navbar-start与.navbar-end各占 50% 宽度分别左对齐flex-start与右对齐flex-end.navbar-center不占用固定宽度通过shrink-0防止被压缩借助 Flex 主轴居中特性水平居中显示。三者组合出的标准三段式骨架如下div classnavbar bg-base-100 shadow-sm div classnavbar-start!-- 左侧 50%汉堡菜单等 --/div div classnavbar-center!-- 中间居中Logo --/div div classnavbar-end!-- 右侧 50%搜索、头像、通知 --/div /div在此基础上navbar外层通常再叠加bg-base-100、shadow-sm等 Tailwind 工具类来提供背景色与阴影这与文档中所有示例的写法一致。示例一仅标题的极简导航栏最简形态一个navbar容器加一个幽灵按钮btn btn-ghost作为品牌标题。div classnavbar bg-base-100 shadow-sm a classbtn btn-ghost text-xldaisyUI/a /div要点btn-ghost提供无背景、悬停时才出现反馈的按钮外观text-xl放大标题字号非常适合品牌 Logo 位。示例二标题 右侧图标利用flex-1/flex-none两个通用工具类分配空间标题占据剩余宽度图标按钮不伸缩、固定靠右。div classnavbar bg-base-100 shadow-sm div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex-none button classbtn btn-square btn-ghost svg aria-labelMore xmlnshttp://www.w3.org/2000/svg fillnone viewBox0 0 24 24 classinline-block h-5 w-5 stroke-current path stroke-linecapround stroke-linejoinround stroke-width2 dM5 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 classnavbar bg-base-100 shadow-sm div classflex-none button classbtn btn-square btn-ghost svg aria-labelMenu xmlnshttp://www.w3.org/2000/svg fillnone viewBox0 0 24 24 classinline-block h-5 w-5 stroke-current path stroke-linecapround stroke-linejoinround stroke-width2 dM4 6h16M4 12h16M4 18h16/path /svg /button /div div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex-none button classbtn btn-square btn-ghost svg aria-labelMore xmlnshttp://www.w3.org/2000/svg fillnone viewBox0 0 24 24 classinline-block h-5 w-5 stroke-current path stroke-linecapround stroke-linejoinround stroke-width2 dM5 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 classnavbar bg-base-100 shadow-sm div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex-none ul classmenu menu-horizontal px-1 liaLink/a/li li details summaryParent/summary ul classbg-base-100 rounded-t-none p-2 liaLink 1/a/li liaLink 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 classnavbar bg-base-100 shadow-sm div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex gap-2 input typetext placeholderSearch classinput w-24 md:w-auto / div classdropdown dropdown-end div tabindex0 rolebutton classbtn btn-ghost btn-circle avatar div classw-10 rounded-full img altTailwind CSS Navbar component srchttps://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp / /div /div ul tabindex-1 classmenu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow li a classjustify-between Profile span classbadgeNew/span /a /li liaSettings/a/li liaLogout/a/li /ul /div /div /div要点搜索框使用input组件类w-24 md:w-auto实现「小屏窄、大屏自适应」头像用avatarw-10 rounded-full裁成圆形dropdown dropdown-end让下拉面板右对齐dropdown-end配合dropdown-content定位z-1保证面板浮于导航栏之上下拉内容用menu menu-sm排版badge在菜单项右侧展示「New」角标。示例六购物车角标 用户下拉的电商导航在前一例基础上叠加indicator角标与card购物车摘要卡片两个组件是电商站点导航的经典组合div classnavbar bg-base-100 shadow-sm div classflex-1 a classbtn btn-ghost text-xldaisyUI/a /div div classflex-none div classdropdown dropdown-end div tabindex0 rolebutton classbtn btn-ghost btn-circle div classindicator svg xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM3 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 classbadge badge-sm indicator-item8/span /div /div div tabindex0 classcard card-sm dropdown-content bg-base-100 z-1 mt-3 w-52 shadow div classcard-body span classtext-lg font-bold8 Items/span span classtext-infoSubtotal: $999/span div classcard-actions button classbtn btn-primary btn-blockView cart/button /div /div /div /div div classdropdown dropdown-end div tabindex0 rolebutton classbtn btn-ghost btn-circle avatar div classw-10 rounded-full img altTailwind CSS Navbar component srchttps://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp / /div /div ul tabindex-1 classmenu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow li a classjustify-between Profile span classbadgeNew/span /a /li liaSettings/a/li liaLogout/a/li /ul /div /div /div要点indicator将badge badge-sm indicator-item徽标定位到购物车图标的右上角数字 8 表示商品件数购物车下拉内容改用card card-smcard-bodycard-actions排版商品数、小计金额text-info着色、btn-primary btn-block全宽「查看购物车」按钮多个dropdown并排放入同一个flex-none容器即得到「购物车 用户」的双下拉导航。示例七三分区布局 居中 Logo这一例正式使用navbar-start/navbar-center/navbar-end三个 part 类左侧汉堡下拉、中间 Logo、右侧搜索与通知div classnavbar bg-base-100 shadow-sm div classnavbar-start div classdropdown div tabindex0 rolebutton classbtn btn-ghost btn-circle svg aria-labelMenu xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM4 6h16M4 12h16M4 18h7 / /svg /div ul tabindex-1 classmenu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow liaHomepage/a/li liaPortfolio/a/li liaAbout/a/li /ul /div /div div classnavbar-center a classbtn btn-ghost text-xldaisyUI/a /div div classnavbar-end button classbtn btn-ghost btn-circle svg aria-labelSearch xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z / /svg /button button classbtn btn-ghost btn-circle div classindicator svg aria-labelNotifications xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM15 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 classbadge badge-xs badge-primary indicator-item/span /div /button /div /div要点这正是前文三分区原理的直接应用navbar-start50% 左、navbar-center居中收缩、navbar-end50% 右内容靠右通知按钮的角标升级为badge badge-xs badge-primary indicator-item——小号badge-xs、主题色badge-primary的空心圆点即「有新通知」的常规表达。响应式方案一小屏下拉菜单、大屏水平菜单这是文档给出的两种响应式方案中的第一种核心手法是同一份菜单内容按断点切换呈现方式div classnavbar bg-base-100 shadow-sm div classnavbar-start div classdropdown div tabindex0 rolebutton classbtn btn-ghost lg:hidden svg aria-labelMenu xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColor path stroke-linecapround stroke-linejoinround stroke-width2 dM4 6h16M4 12h8m-8 6h16 / /svg /div ul tabindex-1 classmenu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow liaItem 1/a/li li aParent/a ul classp-2 liaSubmenu 1/a/li liaSubmenu 2/a/li /ul /li liaItem 3/a/li /ul /div a classbtn btn-ghost text-xldaisyUI/a /div div classnavbar-center hidden lg:flex ul classmenu menu-horizontal px-1 liaItem 1/a/li li details summaryParent/summary ul classp-2 bg-base-100 w-40 z-1 liaSubmenu 1/a/li liaSubmenu 2/a/li /ul /details /li liaItem 3/a/li /ul /div div classnavbar-end a classbtnButton/a /div /div要点小屏默认汉堡按钮通过lg:hidden只在lg断点以下显示点击展开dropdown中的竖排menu menu-sm大屏≥lgnavbar-center上的hidden lg:flex使水平菜单只在lg及以上显示子菜单用details/summary内嵌文档提示「Resize screen to see changes」读者可以在组件页面直接缩放窗口验证两种形态的切换。响应式方案二小屏折叠collapse、大屏完整内容第二种方案思路不同用collapse组件在小屏把导航栏整体折叠起来点击汉堡图标后展开全屏菜单大屏则显示完整内容div classmax-lg:collapse bg-base-200 lg:mb-48 shadow-sm w-full rounded-md input idnavbar-1-toggle classpeer hidden typecheckbox / label fornavbar-1-toggle classfixed inset-0 hidden max-lg:peer-checked:block/label div classcollapse-title navbar div classnavbar-start label fornavbar-1-toggle classbtn btn-ghost lg:hidden svg aria-labelMenu xmlnshttp://www.w3.org/2000/svg classh-5 w-5 fillnone viewBox0 0 24 24 strokecurrentColorpath stroke-linecapround stroke-linejoinround stroke-width2 dM4 6h16M4 12h8m-8 6h16 //svg /label button classbtn btn-ghost text-xldaisyUI/button /div div classnavbar-center hidden lg:flex ul classmenu menu-horizontal px-1 libuttonItem 1/button/li li details summaryParent/summary ul classp-2 bg-base-100 w-40 z-1 libuttonSubmenu 1/button/li libuttonSubmenu 2/button/li /ul /details /li libuttonItem 3/button/li /ul /div div classnavbar-end input typetext placeholderSearch classinput w-64 lg:w-auto / /div /div div classcollapse-content lg:hidden z-1 ul classmenu libuttonItem 1/button/li li buttonParent/button ul libuttonSubmenu 1/button/li libuttonSubmenu 2/button/li /ul /li libuttonItem 3/button/li /ul /div /div要点max-lg:collapse只在小于lg时启用折叠collapse-title是始终可见的导航栏头部内部依然是完整的navbar 三分区collapse-content是折叠后展开的内容区折叠开关使用原生 checkbox peer 联动input classpeer hidden typecheckbox与label fornavbar-1-toggle配对max-lg:peer-checked:block控制全屏遮罩层的显隐lg:hidden的汉堡label充当小屏开关点击即切换 checkbox 状态从而展开/收起菜单大屏时lg:hidden的菜单副本隐藏hidden lg:flex的水平菜单与搜索框完整呈现。配色用 Tailwind 颜色工具类快速换肤Navbar 本身不定义颜色背景与文字色完全交给 Tailwind 工具类因此可以直接接入任意 daisyUI 主题色板div classnavbar bg-neutral text-neutral-content button classbtn btn-ghost text-xldaisyUI/button /div div classnavbar bg-base-300 button classbtn btn-ghost text-xldaisyUI/button /div div classnavbar bg-primary text-primary-content button classbtn btn-ghost text-xldaisyUI/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等。这不是真实类名而是文档站点的前缀占位符其机制如下官方文档支持为组件类配置自定义前缀即 docs 配置/docs/config/page.md) 中提到的prefix选项以规避与业务代码中同名类的冲突文档页面把渲染出的代码块交由 actions.svelte.js 处理node.innerHTML originalContent.replaceAll($$, prefixValue)——用当前前缀值默认空字符串替换所有$$前缀值保存在 Svelte 的writablestore 中stores.js由组件页类名表格旁的 PrefixEdit.svelte 输入框实时修改prefix–占位限制 12 个字符、a-z与-类名表格本身也会跟随前缀变化见 layout-components.svelte输入前缀后表格与代码示例会同步更新仓库还通过测试 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.cssmenu-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 中「骨架最薄、组合最灵活」的组件它只提供navbarnavbar-start/center/end四类布局能力真正的导航形态完全由btn、menu、dropdown、indicator、badge、avatar、card、input、collapse等组件自由组合而成。本文的十个示例覆盖了从极简标题到电商级购物车导航、再到双方案响应式布局的全部官方场景理解了navbar.css中 50% 宽度与shrink-0的三分区规则以及文档$$前缀的替换机制你就能在任何 Tailwind 项目中快速搭建符合自己业务形态的导航栏。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考