---
title: 导航
description: 统一定义导航分组，并将其连接到桌面和移动端界面。
order: 12
toc:
  - id: define-groups
    title: 定义分组
  - id: provide-navigation
    title: 提供导航
  - id: route-state
    title: 路由状态
---

## 定义分组 {#define-groups}

从类型安全的 `NavigationGroup` 开始。导航项可以是直接路由，也可以是嵌套导航分支。

```ts
import type { NavigationGroup } from "@workspace/blocks/navigation"

export const navigationGroups: NavigationGroup[] = [
  {
    id: "workspace",
    label: "工作区",
    items: [
      { id: "dashboard", label: "仪表盘", to: "/dashboard" },
      { id: "media", label: "媒体", to: "/media" },
    ],
  },
]
```

## 提供导航 {#provide-navigation}

`AppLayout` 已经挂载 Provider 和响应式导航界面。自定义外壳可以直接组合它们：

```tsx
<NavigationProvider groups={navigationGroups}>
  <PrimaryNavigation groups={navigationGroups} />
  <MobileNavigationSheet groups={navigationGroups} />
</NavigationProvider>
```

## 路由状态 {#route-state}

标准路由模型使用 `resolveNavigationRouteState`。使用自定义路由的应用可以提供 `GetNavigationRouteState` 实现，同时复用相同导航 UI。