UD5工具箱
核心功能特性
1. 双CSS框架支持
工具提供Bootstrap 5和Tailwind CSS两种框架选项。选择Bootstrap 5时，生成的代码使用语义化的navbar组件类名（如navbar、navbar-expand-lg、navbar-brand等），自动集成响应式折叠和下拉菜单的JS依赖。选择Tailwind CSS时，生成的代码采用工具类组合方式（如bg-blue-600、flex、items-center等），给予开发者最大的样式定制空间。两种方案的代码均遵循框架的最佳实践规范。
2. 多种预设配色方案
工具内置多套精心设计的配色方案，涵盖经典白、经典黑、蓝色、绿色、红色等常见主题。每套配色方案都经过视觉校准，确保导航栏的文字颜色与背景色形成足够的对比度，满足WCAG无障碍标准。用户无需自行调配颜色，选择预设方案即可获得协调的视觉效果。
3. 品牌名称自定义
在导航栏左侧的品牌区域，用户可以自定义品牌名称。该名称会以navbar-brand样式渲染，支持超链接配置，点击后可跳转至网站首页。品牌名称是网站身份的重要标识，工具将其作为必填项置于配置面板顶部，方便用户第一时间完成设置。
4. 固定在页面顶部
开启「固定在页面顶部」开关后，导航栏会以sticky或fixed方式固定在视窗顶部，滚动页面时导航栏始终可见。Bootstrap方案使用fixed-top类实现，Tailwind方案使用fixed top-0 w-full z-50类组合实现。这一功能对于长页面和单页应用尤为重要，确保用户随时可以访问导航链接。
5. 搜索框集成
工具支持在导航栏中嵌入搜索框组件。Bootstrap方案生成包含input-group和form-control的表单结构，Tailwind方案生成使用flex布局和样式类组合的输入框。搜索框默认位于导航栏右侧，与菜单项并列显示，为用户提供站内搜索入口。
6. CTA按钮配置
CTA（Call To Action）按钮是引导用户转化的重要元素。工具支持在导航栏中添加醒目的CTA按钮，用户可以自定义按钮文字（如「免费试用」「立即注册」「联系我们」等）。Bootstrap方案使用btn btn-primary样式，Tailwind方案使用对应的工具类组合，确保按钮在导航栏中具有足够的视觉吸引力。
7. 菜单项管理
工具提供灵活的菜单项管理功能。用户可以通过「添加菜单项」按钮创建新的导航链接，每个菜单项包含显示文字和目标URL两个属性。更重要的是，工具支持下拉菜单功能：将菜单项类型切换为「下拉菜单」后，可以添加多个子项（格式：显示文本|URL），Bootstrap使用dropdown-toggle和dropdown-menu实现，Tailwind使用group-hover实现交互效果。
8. 实时预览
所有配置变更都会即时反映在预览区域。无论是切换CSS框架、修改配色方案、调整菜单项还是启用功能模块，用户都能在下方的预览区看到实时更新的效果。这种所见即所得的交互方式大幅提升了配置效率，避免了反复修改代码的繁琐流程。
9. 一键复制代码
配置完成后，点击「复制代码」按钮即可将生成的HTML代码复制到剪贴板。生成的代码是完整的HTML片段，包含必要的结构标签、类名和内联属性。用户只需将代码粘贴到项目中的相应位置，确保引入了对应的CSS框架资源即可正常运行。
10. 响应式支持
生成的导航栏代码天然支持响应式布局。Bootstrap方案在屏幕宽度小于断点（默认992px）时自动折叠为汉堡菜单；Tailwind方案提供基础的响应式结构，开发者可按需添加移动端交互逻辑。无论在桌面端还是移动端，导航栏都能保持良好的可用性和视觉效果。