组件 · 导航 · 11
导航栏
导航栏 = 顶部横条，承载标志、链接与搜索，用发丝线或背景模糊与页面分隔。
直达修改 Prompt →
导航栏是什么？
导航栏是持续的方位条。写明高度、标志、链接密度、搜索和滚动行为。
变体
点击属性即可在预览中高亮。
-
- 具有不透明背景填充的导航栏。
-
- 在内容滚到其下方之前无背景的导航栏。
-
- 带毛玻璃（backdrop-blur）背景的导航栏。
-
- 导航栏的竖向高度，影响其挤压内容的程度。
-
- 导航栏起始处的品牌标识。
-
- 导航栏中的主要导航项。
-
- 给具体值，不要只给感觉词。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
结构解剖
这些是 Prompt 里应该点名的部件。
什么时候用
- 每页顶部的持续方位条
- 营销站：标志 + 3 个链接 + 搜索框
- 产品应用：加搜索或账户菜单
什么时候别用
- 层级很深——需配合侧栏
- 没有规划菜单按钮的移动端
- 顶级链接超过 5 个
Create a site navbar.
STYLE
- 64px tall, hairline bottom border
COMPONENTS
- wordmark, 4 links, primary CTA
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui