# @gridui/site-navigation 中文文档

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

版本：1\.1\.1
npm 元数据更新时间：2026-11-01T02:49:46.770Z
中文译文更新时间：2026-11-01T07:43:05.975Z
软件包许可：UNLICENSED

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

原始 npm 页面：https://www.npmjs.com/package/%40gridui/site-navigation
原文对照：https://npmcn.com/package/%40gridui/site-navigation/?lang=original

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

- 包体积（解压后）：23.3 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：9 个
- peer 依赖：react ^19\.2\.0，react-dom ^19\.2\.0
- 首次发布：2026-10-31T02:44:53.625Z
- 最新版本发布：2026-11-01T02:49:46.608Z
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

GridUI React站点导航

## 安装

```sh
npm install @gridui/site-navigation
```

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

## README

# @gridui /网站导航

着陆的家庭。公共API: `SiteNavigation`， `SiteNavigationLink`， `SiteNavigationProps`.

从 `@gridui/site-navigation` 和负载 `@gridui/site-navigation/styles.css` 后的主题。 此家族使用的任何组合依赖项的加载样式。应用程序拥有自己的路由、标签、状态持久化和品牌。

看到 [组件所有权](https://npmcn.com/package/docs/component-ownership.md) 和 [版本历史](https://npmcn.com/package/%40gridui/site-navigation/.changeset/history/).

## 丰富的导航菜单

SiteNavigation结合 `@gridui/responsive-navigation`， `@gridui/menu`， `@gridui/drawer`, `@gridui/button`． 应用程序提供链接、本地化标签、 首选项、桌面内容和可选的移动内容/页脚槽。

ResponsiveNavigation拥有桌面/移动切换功能。菜单拥有内容中立 导航部分。抽屉拥有模态焦点管理，滚动锁定，开始/结束 放置、解除及其页眉/正文/页脚部分。独立的Popover 家庭拥有桌面悬浮意图。SiteHeader提供了一个单独的框架外壳 来电者自有品牌。

集 `columns={1}` 在MenuGrid上传递移动内容；构图是这样的 不选择它的私人后代。加载之前呈现的依赖样式 SiteNavigation风格。

`className` 样式ResponsiveNavigation根。对于其链接和的标题 首选项在远端形成一个紧凑组，使用应用程序实用工具 类禁用根的默认伸缩增长：

```tsx
<SiteHeader justify="between" gap={16} padding={{ base: 24, lg: 32 }}>
    <BrandLink href="/">Product</BrandLink>
    <SiteNavigation className="flex-none" {...localizedNavigation} />
</SiteHeader>
```

如果没有这个类，导航栏将保持其现有的灵活宽度 其首选项位于可用导航区域的相对边缘。

## 本地导航和抽屉解雇

`links` 之外，还接受本地锚属性和处理程序 `href`， `label`, `current`． 调用者的 `onClick` 首先在桌面和 移动。调用 `preventDefault()` 保持移动抽屉打开。修改后点击, 非主要点击、下载和指向另一个浏览上下文的链接 保持他们原有的行为，同时把抽屉打开。

一个普通的同上下文移动链接关闭抽屉。如果它的目的地有 片段并匹配当前的原点、路径和查询、本地锚导航 保持目标焦点和滚动位置，而不是将焦点返回到 菜单触发器。关闭按钮和逃离解雇继续恢复触发器 的焦点。 `onMobileCloseAutoFocus` 将暴露底层的DrawerPanel事件 应用程序需要另一个焦点策略；调用 `preventDefault()` 抑制了 正常触发恢复。它不会取消导航或抽屉解雇。

```tsx
<SiteNavigation
    links={[
        { href: "#features", label: "Features" },
        { href: "/guide/", label: "Guide", target: "_blank", rel: "noreferrer" },
        { href: "/report.csv", label: "Download report", download: true },
    ]}
    {...navigationLabelsAndPreferences}
/>
```

Caller-owned `mobileContent`， `mobilePreferences`, `mobileFooter` 槽保留 它们自己的激活策略。将它们的控件与公共Drawer部件组合在一起 他们什么时候应该解散专家组。

## 常见问题

### @gridui/site-navigation 是什么？

GridUI React站点导航

### 如何安装 @gridui/site-navigation？

在项目目录运行 npm install @gridui/site-navigation，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.0）、react-dom（^19\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @gridui/site-navigation 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @gridui/site-navigation 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @gridui/site-navigation 可以商用吗？

@gridui/site-navigation 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @gridui/site-navigation 还在维护吗？

最新版本 1\.1\.1 发布于 2026/11/01（2 天前）；至今共发布 4 个版本，其中过去 12 个月发布了 4 个；首次发布于 2026/10/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。