组件 · 导航 · 14
面包屑 面包屑 = 用斜杠分隔的路径，指示当前页所处位置，最后一项为纯文本。
直达修改 Prompt →
⌂ / Library / Components / Breadcrumb
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a breadcrumb component.
STYLE
- 13px links in #6E6E73, hover swaps to #1D1D1F with an underline
- a 13px #C7C7CC slash separator with 8px spacing on both sides
- the current page is plain #1D1D1F text, not a link
- a house icon stands in for the root level
STATES
- default, hover on the links, collapsed with a … button
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing breadcrumb collapse long trails.
Use:
- keep the root and the last two levels, hide the middle behind a … button
- clicking … opens the hidden levels in a small dropdown
- keep separators, sizes and the current-page style unchanged
Only add the collapse behavior.
Create a breadcrumb component, replacing the existing one.
Requirements:
- 13px links #6E6E73, hover #1D1D1F with a 1px underline
- slash separators #C7C7CC with 8px spacing on both sides
- the current page renders as plain text, aria-current="page"
- collapse: root plus the last two levels, … opens the hidden middle
- a 14px house icon replaces the root label
Keep the page header layout unchanged.
MOTION
- Hover: underline expands from the left, 120ms ease-out.
- Colour: 100ms. Click: no animation.
- Separators never animate.
- prefers-reduced-motion: colour change only.
修改类 Prompt 只动目标，不碰页面其余部分。
面包屑是什么？ 面包屑说明当前页所处的位置。点名分隔符、哪些层级可点，以及过深路径如何折叠。
变体 点击属性即可在预览中高亮。
路径 在 Prompt 里写明这个类型。
折叠 在 Prompt 里写明这个类型。
带图标 在控件内前置图标的字段（搜索、日历等）。
分隔符 给具体值，不要只给感觉词。
层级 给具体值，不要只给感觉词。
折叠 给具体值，不要只给感觉词。
当前页 给具体值，不要只给感觉词。
图标 仅含单个图标、无文字的按钮，必须配 aria-label。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
悬停 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
已折叠 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
01 根级链接 02 分隔符 03 中间链接 04 当前页 什么时候用 层级较深的内容结构：文档、目录、文件夹 电商分类路径 超过两层的后台板块 什么时候别用 站点是扁平的——路径只剩页面标题 页面已有标签页或侧栏承担同样职责 层级由不可读的 URL 生成 The last crumb is the page you are on — make it text, not a link to itself.
复制 Prompt Create a breadcrumb component.
STYLE
- 13px links in #6E6E73, hover swaps to #1D1D1F with an underline
- a 13px #C7C7CC slash separator with 8px spacing on both sides
- the current page is plain #1D1D1F text, not a link
- a house icon stands in for the root level
STATES
- default, hover on the links, collapsed with a … button
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui