# 极简导航（Flat Top Navigation）

- 类型 / 材质：`nav` / `minimal`（极简）
- 状态：done ｜ 最后提交：2026-10-31
- 灵感来源：Linear 顶部 nav 的平面化处理（去材质，留结构）
- 依据标准：`/design#layout` ｜ 组件页：`/showcase/component/nav/minimal` ｜ 条目：`/r/nav--minimal.json`
- 必缺状态：焦点
- 整页场景：尚未接入

## 规格

- 白底 + 发丝边外壳，圆角收到 --radius-md
- 导航项 hover 只加页面底色，激活项 accent 实底
- logo / actions 为 slot，外部内容全定制
- overflow-x-auto 保住窄屏可用

## 参数（CSS 变量）

`--color-accent` `--color-bg` `--color-divider` `--color-surface` `--color-text` `--color-text-muted` `--shadow-sm`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `logo` | `ReactNode` | 可选 | — |
| `items` | `NavItem[]` | 必填 | — |
| `activeId` | `string` | 可选 | — |
| `onSelect` | `(id: string) => void` | 可选 | — |
| `actions` | `ReactNode` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「极简导航」— Flat Top Navigation（导航 / Minimal）
灵感来源：Linear 顶部 nav 的平面化处理（去材质，留结构）
规格：
- 白底 + 发丝边外壳，圆角收到 --radius-md
- 导航项 hover 只加页面底色，激活项 accent 实底
- logo / actions 为 slot，外部内容全定制
- overflow-x-auto 保住窄屏可用
参数（CSS 变量）：--color-accent --color-bg --color-divider --color-surface --color-text --color-text-muted --shadow-sm
必缺状态：焦点
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/nav/minimal · 标准 layout /design#layout · 调研笔记 /showcase/component/nav/minimal#notes
```

## 调研笔记

import { type ReactNode } from 'react';

export interface NavItem {
  id: string;
  label: string;
  href?: string;
}

interface Props {
  logo?: ReactNode;
  items: NavItem[];
  activeId?: string;
  onSelect?: (id: string) => void;
  actions?: ReactNode;
}

/**
 * 极简导航：与玻璃导航同一份 props，
 * 外壳是白底 + 发丝边的直边条，active 仍是 accent 实底——层级只靠边界与颜色。
 */
export function MinimalNav({
  logo,
  items,
  activeId,
  onSelect,
  actions,
}: Props) {
  return (
    <nav
      className="
        flex items-center gap-1 max-w-full overflow-x-auto
        px-2 py-1.5
        rounded-md
        bg-[var(--color-surface)] border border-[var(--color-divider)]
        shadow-[var(--shadow-sm)]
      "
    >
      {logo && <div className="px-3">{logo}</div>}

      <div className="flex items-center gap-0.5 min-w-max">
        {items.map((item) => {
          const isActive = item.id === activeId;
          return (
            <button
              key={item.id}
              type="button"
              onClick={() => onSelect?.(item.id)}
              className={`
                press-feedback px-3 py-1.5 rounded-sm text-sm whitespace-nowrap
                transition-colors
                ${isActive
                  ? 'bg-[var(--color-accent)] text-[var(--color-bg)] font-medium'
                  : 'text-[var(--color-text-muted)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg)]'
                }
              `}
            >
              {item.label}
            </button>
          );
        })}
      </div>

      {actions && <div className="px-2">{actions}</div>}
    </nav>
  );
}