# @bbc/psammead-navigation 中文文档

规范地址：https://npmcn.com/package/%40bbc/psammead-navigation/

版本：9\.2\.22
npm 元数据更新时间：2026-04-16T10:49:20.526Z
中文译文更新时间：2026-11-07T18:58:50.702Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bbc/psammead-navigation
原文对照：https://npmcn.com/package/%40bbc/psammead-navigation/?lang=original
项目主页：https://github.com/bbc/psammead/blob/latest/packages/components/psammead-navigation/README.md
源码仓库：https://github.com/bbc/psammead/tree/latest/packages/components/psammead-navigation

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：477 kB，24 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：4 个
- peer 依赖：react \>=16\.9\.0，prop-types ^15\.7\.2，@emotion/styled ^11\.0\.0
- 首次发布：2019-06-25T14:44:25.694Z
- 最新版本发布：2022-04-13T12:15:21.282Z
- 近 30 天下载量：4500（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：151（近 12 个月 0 个）

## 中文简介

用于索引页面的导航栏

## 安装

```sh
npm install @bbc/psammead-navigation
```

也可以使用：`pnpm add @bbc/psammead-navigation`、`yarn add @bbc/psammead-navigation`、`bun add @bbc/psammead-navigation`

## README

# 闪电导航 [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-navigation%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-navigation%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-navigation)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-navigation) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-navigation)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-navigation&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/section-label--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-navigation.svg)](https://www.npmjs.com/package/@bbc/psammead-navigation) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)

## 说明

这个 `@bbc/psammead-navigation` 软件包是一组两个组件, `NavigationUl` 财务报告和审定财务报表 `NavigationLi`它们使用 `ul` 财务报告和审定财务报表 `li` 分别是HTML元素. 该包还包括一个汉堡菜单和一个下行导航,对于600px以下的断点可见.

## 出口

`/dropdown` - 在600px以下的断点上,添加带有汉堡菜单的下拉导航 `/scrollable` - 使导航在600px下可滚动.

## 安装

`npm install @bbc/psammead-navigation`

## 道具

### 导航

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `<ScrollableNavigation dir={dir}><NavigationUl><NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi></NavigationUl><ScrollableNavigation/>` |
| 目录 | 字符串 | 没有 | `'ltr'` | `'rtl'` |
| 打开 | 布尔 | 没有 | `false` | `true` |
| mp Open分类 | 字符串 | 没有 | `null` | `'open'` |
| 品牌背景颜色 | 字符串 | 对 | 不详 | `'#B80000'` |
| 品牌前景颜色 | 字符串 | 对 | 不详 | `'#FDFDFD'` |
| 品牌边界颜色 | 字符串 | 对 | 不详 | `'#EAB3B3'` |
| 品牌高亮颜色 | 字符串是 否 | 不详 | `'#FFFFFF'` |  |

### 导航Ul

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `<NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi>` |

### 导航Li

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| url 密码 | 字符串 | 对 | 不详 | `/sport` |
| 脚本 | 对象 | 对 | 不详 | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
| 活动 | 布尔 | 没有 | `false` | `true` |
| 当前 页面文本 | 字符串 | 没有 | `null` | `Current page` |
| 服务 | 字符串 | 对 | 不详 | `'news'` |
| 目录 | 字符串 | 没有 | `'ltr'` | `'rtl'` |
| 品牌前景颜色 | 字符串 | 对 | 不详 | `'#FDFDFD'` |
| 品牌边界颜色 | 字符串 | 对 | 不详 | `'#EAB3B3'` |
| 品牌高亮颜色 | 字符串是 否 | 不详 | `'#FFFFFF'` |  |

### 可滚动导航

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `<NavigationUl><NavigationLi url="/" script={latin} active="true">Home</NavigationLi><NavigationLi url="/sport" script={latin}>{Sport}</NavigationLi></NavigationUl>` |
| 目录 | 字符串 | 没有 | `'ltr'` | `'rtl'` |
| 品牌背景颜色 | 字符串 | 对 | 不详 | `'#B80000'` |
| 品牌高亮颜色 | 字符串是 否 | 不详 | `'#FFFFFF'` |  |

### Canonical Dropdown (美国)

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `<DropdownUl><DropdownLi script={latin} service='news' key='sport' url='/sport' active="false"> Sport </DropdownLi></DropdownUl>` |
| 打开 | 嘘 | 对 | 不详 | `false` |

### 向下倾斜

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 节点 | 对 | 不详 | `<DropdownUl><DropdownLi script={latin} service='news' key='sport' url='/sport' active="false"> Sport </DropdownLi></DropdownUl>` |

### 滴滴下来的Li

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 儿童 | 字符串 | 对 | 不详 | `'Sport'` |
| url 密码 | 字符串 | 对 | 不详 | `/sport` |
| 脚本 | 对象 | 对 | 不详 | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
| 服务 | 字符串 | 对 | 不详 | `'news'` |
| 活动 | 布尔 | 没有 | `false` | `true` |
| 当前 页面文本 | 字符串 | 没有 | `null` | `Current page` |
| 目录 | 字符串 | 没有 | `ltr` | `rtl` |

### 巨型金属按钮

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 已宣布文本 | 字符串 | 对 | 不详 | `'Menu'` |
| 点击 | 函数 | 对 | 不详 | `() => { console.log("Handle onClick action"); }` |
| 打开 | 嘘 | 对 | 不详 | `false` |
| 目录 | 字符串 | 没有 | `'ltr'` | `'rtl'` |
| 脚本 | 对象 | 对 | 不详 | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |

### AMP 菜单

| 参数 | 类型 | 需求 | 默认 | 示例 |
| --- | --- | --- | --- | --- |
| 已宣布文本 | 字符串 | 对 | 不详 | `'Menu'` |
| 切换 | 字符串 | 对 | 不详 | `"menu.toggleVisibility"` - 必须是一个有效的AMP目标的行动 |
| 目录 | 字符串 | 没有 | `'ltr'` | `'rtl'` |
| 脚本 | 对象 | 对 | 不详 | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |

## 导航使用

```jsx
import React from 'react';
import { ScrollableNavigation } from '@bbc/psammead-navigation/scrollable';
import Navigation, {
  NavigationUl,
  NavigationLi,
} from '@bbc/psammead-navigation';
import { latin } from '@bbc/gel-foundations/scripts';

<Navigation
  brandBackgroundColour='#B80000'
  brandForegroundColour='#FDFDFD'
  brandBorderColour='#EAB3B3'
  brandHighlightColour='#FFFFFF'
>
  <ScrollableNavigation
    brandBackgroundColour='#B80000'
    brandHighlightColour='#FFFFFF'
  >
    <NavigationUl>
      <NavigationLi
        url="/"
        script={latin}
        active
        currentPageText="Current Page"
        service="news"
        brandForegroundColour='#FDFDFD'
        brandBorderColour='#EAB3B3'
        brandHighlightColour='#FFFFFF'
      >
        Home
      </NavigationLi>
      <NavigationLi
        url="/sport"
        script={latin}
        service="news"
        brandForegroundColour='#FDFDFD'
        brandBorderColour='#EAB3B3'
        brandHighlightColour='#FFFFFF'
      >
        {Sport}
      </NavigationLi>
      <NavigationLi
        url="/weather"
        script={latin}
        service="news"
        brandForegroundColour='#FDFDFD'
        brandBorderColour='#EAB3B3'
        brandHighlightColour='#FFFFFF'
      >
        {Weather}
      </NavigationLi>
    </NavigationUl>
  </ScrollableNavigation>
</Navigation>;
```

## 降下导航使用

```jsx
import React from 'react';
import {
  Dropdown,
  DropdownUl,
  DropdownLi,
} from '@bbc/psammead-navigation/dropdown';
import { latin } from '@bbc/gel-foundations/scripts';

<CanonicalDropdown isOpen={isOpen}>
  <DropdownUl>
    <DropdownLi
      script={latin}
      service="news"
      key="Home"
      url="/"
      active
      currentPageText="Current page"
    >
      Home
    </DropdownLi>
    <DropdownLi script={latin} service="news" key="Sport" url="/sport">
      Sport
    </DropdownLi>
  </DropdownUl>
</CanonicalDropdown>
```

## Canonical 菜单按钮使用

```jsx
import React from 'react';
import { CanonicalMenuButton } from '@bbc/psammead-navigation/dropdown';
import { latin } from '@bbc/gel-foundations/scripts';

<CanonicalMenuButton
  announcedText="Menu"
  isOpen
  dir={dir}
  onClick={() => {
    console.log('Handle onClick action');
  }}
  script={latin}
/>
```

## Amp 菜单按钮使用

```jsx
import React from 'react';
import { AmpMenuButton } from '@bbc/psammead-navigation/dropdown';
import { latin } from '@bbc/gel-foundations/scripts';

<AmpMenuButton
  announcedText="Menu"
  onToggle="menu.toggleVisibility"
  script={latin}
  dir={dir}
/>
```

注意: `AmpMenuButton` 想要正确工作,一个 `id` 应添加到 `Navigation` 组件。 这个 `id` 可以作为道具传递给组件. 同样, `ScrollableNavigation` 还要求 `id` 将被加入其中.

### 何时使用此组件

这个 `Navigation` 它旨在显示所有页面上的导航栏,它将显示一个站点上的所有部分。 如果一行有太多的项目适合,则项目会被包到下一行.

另一方面,与 `ScrollableNavigation` 我们可以把清单放在一条线上, 横向滚动, 允许访问更多链接, 低于600px.

### 无障碍说明

导航系统有一个 [`navigation` 标志](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/navigation.html) 以提供一种方法来识别用于导航的链接.

我们增加了这个角色 `list` 财务报告和审定财务报表 `listitem` 页:1 `NavigationUl` 财务报告和审定财务报表 `NavigationList` ,分别由于一个语音Overbug来恢复列表语义.

我们还增加了可视化隐藏文本,让用户知道在正则和下行导航中哪个项目是当前页面. 注意此处使用可视化隐藏文本是因为此时缺乏对aria-current页面属性的支持. 也注意到使用 `role="text"` 停止在Voice Over中分割文本.

我们增加了一个 `aria-expanded` 属性到菜单按钮,以指示菜单是崩溃还是扩展.

## 捐款

Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: [psammead 仓库的根](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)。 。 。 .

### [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)

我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 [行为守则](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)请稍候再读一下.

### 许可证

萨姆米德 [Apache 2.0 许可](https://github.com/bbc/psammead/blob/latest/LICENSE)。 。 。 .

## 常见问题

### @bbc/psammead-navigation 是什么？

用于索引页面的导航栏

### 如何安装 @bbc/psammead-navigation？

在项目目录运行 npm install @bbc/psammead-navigation，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.9\.0）、prop-types（^15\.7\.2）、@emotion/styled（^11\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bbc/psammead-navigation 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bbc\_\_psammead-navigation 是否存在。

### @bbc/psammead-navigation 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bbc/psammead-navigation 可以商用吗？

@bbc/psammead-navigation 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @bbc/psammead-navigation 的下载量有多少？

根据 npm 官方下载统计，@bbc/psammead-navigation 在 2026/10/08 – 2026/11/06 这 30 天内被下载 4,500 次，日均约 150 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bbc/psammead-navigation 还在维护吗？

最新版本 9\.2\.22 发布于 2022/04/13（4 年前）；至今共发布 151 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/06/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。