# 面包屑 Breadcrumb > 一行「首页 / 分类 / 当前页」，告诉你现在在哪一层，点前面任何一级都能退回去。 分类：导航 [全部组件和流程](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 - 放在：导航 - 手机上：好用：传 collapse 后只留最后两级，中间收进「…」，点开能看到被收起的层级。 - 性能代价：低 - 常搭配：[侧边栏 Sidebar](https://www.dachuiai.com/c/sidebar.md)、[标签页 Tabs](https://www.dachuiai.com/c/tabs.md) ## 装进项目 - 写法：React 18 以上 + TypeScript + Tailwind CSS v4，一个文件就能用，不引用别的组件。 - 依赖：`npm i lucide-react` - 文件：原样存成 `breadcrumb.tsx`（比如 `src/components/breadcrumb.tsx`）。能跑命令就下载[原文](https://www.dachuiai.com/code/breadcrumb.tsx)，比手抄准：`curl -fsSL -o src/components/breadcrumb.tsx https://www.dachuiai.com/code/breadcrumb.tsx`（Windows 写 `curl.exe`）。下载完看一眼第一行是 `import`，不是网页。 - 导出：`Breadcrumb` 是可以直接用的部分；最后的 `export default` 是演示示例，只作参考。 - 图片：示例用了本站的 [/tex/s5.jpg](https://www.dachuiai.com/tex/s5.jpg)。换成用户自己的图；只想先看效果，可以从本站同样的路径下载，放进项目的 public 目录。 - 注意：items 是各级的 {label, href}，最后一项是当前页。 - 保留代码里 `prefers-reduced-motion` 的处理：用户开了「减弱动态效果」时内容照样完整显示。 - 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、有赞这类建站平台装不进代码，告诉用户去平台自带的动效设置里找。 ## 参数 | 参数 | 默认值 | 作用 | | --- | --- | --- | | `items` | | 要显示的一组内容，格式见代码里的类型 | | `collapse` | `false` | 为 true 时只留最后两级，中间收进「…」 | ## 你可以说 > 商品页上方加 Breadcrumb 面包屑：首页 / 户外装备 / 露营 / 帐篷；手机上只留最后两级，中间收进「…」。 ## 完整代码 ```tsx import {useEffect, useRef, useState} from 'react'; import {ChevronRight, House, MoreHorizontal} from 'lucide-react'; /* --------------------------------------------------------------- * Breadcrumb 面包屑 * 一行"首页 / 户外装备 / 帐篷"，告诉你现在在哪一层，点前面任何一级都能退回去。 * 它只是辅助，不能代替主导航。 * 手机上放不下时只留最后两级，中间收进"…"，点开能看到被收起的层级（不折成两行）。 * ------------------------------------------------------------- */ export type Crumb = {label: string; href: string}; export function Breadcrumb({items, collapse = false}: {items: Crumb[]; collapse?: boolean}) { const [open, setOpen] = useState(false); const wrap = useRef(null); const hidden = collapse && items.length > 3 ? items.slice(1, -2) : []; const shown = hidden.length ? [items[0], null, ...items.slice(-2)] : items; useEffect(() => { if (!open) return; const close = (e: Event) => { if (!wrap.current?.contains(e.target as Node)) setOpen(false); }; const esc = (e: KeyboardEvent) => e.key === 'Escape' && setOpen(false); addEventListener('pointerdown', close); addEventListener('keydown', esc); return () => { removeEventListener('pointerdown', close); removeEventListener('keydown', esc); }; }, [open]); return ( ); } /* ---------------- 示例：同一条路径，电脑上完整显示，手机上只留最后两级 ---------------- */ const PATH: Crumb[] = [ {label: '首页', href: '#'}, {label: '户外装备', href: '#gear'}, {label: '露营', href: '#camp'}, {label: '帐篷', href: '#tents'}, {label: '轻量双人帐篷', href: '#p'}, ]; export default function BreadcrumbDemo() { return (

轻量双人帐篷

1.6 kg · 三分钟搭好

¥899
{/* 手机宽度 */}
轻量双人帐篷
¥899
); } ```