# 顶部导航栏 Navbar
> 最上面一排：Logo、菜单、搜索和登录，当前页高亮。
分类：导航
[全部组件和流程](https://www.dachuiai.com/llms.txt) · [导航选型规则](https://www.dachuiai.com/guides/navigation.md)
## 给 AI：用户把这个组件发给了你
1. 先看用户的项目：框架、页面类型、现在的风格、手机还是电脑为主。
2. 对照下面的「适合 / 不适合」判断合不合适。不合适就直接说，并从[导航选型规则](https://www.dachuiai.com/guides/navigation.md)或[全部组件](https://www.dachuiai.com/llms.txt)里另挑一个。
3. 合适就按「装进项目」装好，示例里的文字和图片换成用户自己的。
4. 告诉用户用了什么、放在哪个文件、以后想改快慢、颜色、大小改哪个参数。
## 什么时候用
- 适合：几乎所有网站的顶部。
- 不适合：后台工具界面（主菜单放侧边栏）。
- 适合的网站：官网、本地小店、电商、作品集、SaaS、内容站、活动页
- 放在：导航
- 手机上：要改：手机上菜单收进汉堡菜单，只留 Logo 和一两个按钮。
- 性能代价：低
- 常搭配：[吸顶导航 Sticky Header](https://www.dachuiai.com/c/sticky-header.md)、[超级菜单 Mega Menu](https://www.dachuiai.com/c/mega-menu.md)、[汉堡菜单 Hamburger Menu](https://www.dachuiai.com/c/hamburger-menu.md)
## 装进项目
- 写法：React 18 以上 + TypeScript + Tailwind CSS v4，一个文件就能用，不引用别的组件。
- 依赖：`npm i lucide-react`
- 文件：原样存成 `navbar.tsx`（比如 `src/components/navbar.tsx`）。能跑命令就下载[原文](https://www.dachuiai.com/code/navbar.tsx)，比手抄准：`curl -fsSL -o src/components/navbar.tsx https://www.dachuiai.com/code/navbar.tsx`（Windows 写 `curl.exe`）。下载完看一眼第一行是 `import`，不是网页。
- 导出：`Navbar` 是可以直接用的部分；最后的 `export default` 是演示示例，只作参考。
- 图片：示例用了本站的 [/tex/s4.jpg](https://www.dachuiai.com/tex/s4.jpg)。换成用户自己的图；只想先看效果，可以从本站同样的路径下载，放进项目的 public 目录。
- 注意：Navbar 不收参数，菜单写在文件里，直接改。做精致的关键：当前页有明确的选中态，悬停有底色，右侧按钮分清主次。
- Next.js（有 app 文件夹）：文件第一行加 `'use client';`。
- 用 JavaScript 不用 TypeScript：Vite 和 Next.js 都能直接用 .tsx 文件；也可以删掉类型标注，改名 .jsx。
- 没有 Tailwind：先装 Tailwind CSS v4（Vite 项目 `npm i tailwindcss @tailwindcss/vite`，vite 配置的 plugins 里加 `tailwindcss()`，入口引入的那个 CSS 文件（一般是 `src/index.css`）第一行写 `@import "tailwindcss";`），或者把类名改写成项目用的样式。
- 已经装了 Tailwind v3：别为了一个组件升级。类名大多通用，少数 v4 写法要换，比如焦点框 `outline-2` 在 v3 里要写成 `outline outline-2`。
- 不是 React（Vue、Svelte、小程序、纯 HTML）：照着代码的做法改写，时长、曲线、参数保持一样。Wix、有赞这类建站平台装不进代码，告诉用户去平台自带的动效设置里找。
## 你可以说
> 顶部加一个 Navbar 导航栏：左边 Logo，中间菜单，右边搜索、购物车和登录；当前页高亮。
## 完整代码
```tsx
import {useState} from 'react';
import {Search, ShoppingBag} from 'lucide-react';
/* ---------------------------------------------------------------
* Navbar 顶部导航栏
* 最上面一排：Logo、菜单、搜索和登录按钮。AI 默认就会做；
* 想要更精致，就要求：当前页有明确的选中态、悬停有底色、右侧按钮主次分明。
* ------------------------------------------------------------- */
const LINKS = ['首页', '装备', '露营', '徒步', '攻略'];
export function Navbar() {
const [active, setActive] = useState('首页');
return (
);
}
/* ---------------- 示例：「山野」首页 ---------------- */
export default function NavbarDemo() {
return (
);
}
```
