@gridui/site-navigation

中文文档
1.1.1发布于 2026/11/01UNLICENSEDTypeScriptES Module

GridUI React站点导航

中文使用文档

@gridui /网站导航

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

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

看到 组件所有权 和 版本历史.

丰富的导航菜单

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

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

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

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

<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() 抑制了 正常触发恢复。它不会取消导航或抽屉解雇。

<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 共发布 4 个版本,首次发布于 2026/10/31;过去 12 个月发布了 4 个版本。

版本发布日期距今
1.1.1latest2026/11/012 天前
1.0.02026/10/313 天前
0.0.02026/10/313 天前
0.0.0-stage2026/10/313 天前

关于 @gridui/site-navigation 的常见问题

@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 和提交记录判断。