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