Navigation
响应式导航栏
一个固定响应式导航栏,包含 logo、链接、CTA 按钮和移动端汉堡菜单。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度beginner
英文提示词
Create a responsive navbar for a SaaS product. Layout: logo on the left, navigation links in the center (Features, Pricing, Docs, Blog), and a "Get Started" CTA button on the right. On mobile, show a hamburger menu that opens a slide-in drawer with the links. Use shadcn/ui Button and Sheet components and Tailwind CSS. Make the navbar sticky with a subtle shadow on scroll.
中文提示词
为 SaaS 产品创建一个响应式导航栏。布局:左侧 logo,中间导航链接(Features、Pricing、Docs、Blog),右侧 "Get Started" CTA 按钮。移动端显示汉堡菜单,点击后滑出抽屉显示链接。使用 shadcn/ui Button 和 Sheet 组件以及 Tailwind CSS。使导航栏固定,滚动时显示微妙阴影。

概述
一个适用于桌面端和移动端的标准顶部导航栏。包含固定行为和移动端抽屉。
功能特性
- Logo + 导航链接 + CTA 布局
- 固定页头,滚动时显示阴影
- 移动端汉堡菜单
- 移动端链接滑出抽屉
- 响应式断点处理
使用方法
将提示词复制到 v0 或 Cursor 中。更新链接和 CTA 以匹配你的网站结构。
自定义选项
修改提示词以:
- 添加下拉超级菜单
- 登录后显示用户头像
- 添加深色模式切换
- 改为透明 hero 导航栏