# 导航组件总览

dotNet.AntdUI 的导航类组件用于组织页面层级、入口菜单、分页与流程状态。常用组件包括：

- `Breadcrumb`：面包屑，显示当前位置层级。
- `Dropdown`：下拉菜单按钮，适合动作菜单。
- `Menu`：侧边/顶部导航菜单。
- `PageHeader`：页面标题区，可承载返回按钮、描述、额外操作。
- `TabHeader`：轻量多标签页头；只管理标签头，不自动管理内容页。
- `Tabs`：完整标签页容器，适合管理多个内容页。
- `Pagination`：分页控件，只负责页码 UI，不自动切数据。
- `Steps`：步骤条，展示流程进度。

## 选择建议

| 需求 | 推荐组件 |
| --- | --- |
| 显示“首页 / 列表 / 详情”路径 | `Breadcrumb` |
| 顶部/侧边主导航 | `Menu` |
| 按钮点击后弹出动作列表 | `Dropdown` |
| 数据表格分页 | `Pagination` + 自己切换数据 |
| 表单向导、审批流程 | `Steps` |
| 只需要标签头，内容区自己控制 | `TabHeader` |
| 需要标签头 + 内容页容器 | `Tabs` |
| 页面标题、返回、描述 | `PageHeader` |

## 组合示例：PageHeader + Breadcrumb + Menu

```aardio
import win.ui;
import dotNet.AntdUI;
import System.Drawing;

var winform = win.form(text="导航组件组合";right=860;bottom=520);
winform.add(host={cls="custom";left=0;top=0;right=860;bottom=520;z=1});

var baseForm = AntdUI.BaseForm(winform.host);

var header = AntdUI.PageHeader();
header.Parent = baseForm;
header.Location = System.Drawing.Point(0,0);
header.Size = System.Drawing.Size(860,72);
header.Text = "订单详情";
header.Description = "PageHeader 负责页面标题与描述";

var breadcrumb = AntdUI.Breadcrumb();
breadcrumb.Parent = baseForm;
breadcrumb.Location = System.Drawing.Point(16,78);
breadcrumb.Size = System.Drawing.Size(500,40);

for i,text in ["首页","订单","详情"]{
    var item = AntdUI.BreadcrumbItem();
    item.ID = "nav" + i;
    item.Text = text;
    breadcrumb.Items.Add(item);
}

var menu = AntdUI.Menu();
menu.Parent = baseForm;
menu.Location = System.Drawing.Point(0,128);
menu.Size = System.Drawing.Size(200,392);

var m1 = AntdUI.MenuItem("概览");
var m2 = AntdUI.MenuItem("设置");
menu.Items.Add(m1);
menu.Items.Add(m2);

breadcrumb.ItemClick = function(sender,e){
    if(e.Item) winform.text = "面包屑：" + e.Item.Text;
}

menu.ItemClick = function(sender,e){
    if(e.Item) winform.text = "菜单：" + e.Item.Text;
}

winform.show();
win.loopMessage();
```

## 与 aardio 窗口宿主的关系

- 单个 AntdUI 控件可直接 `AntdUI.Button(winform.host)` 这样嵌入 custom 宿主。
- 一个 custom 宿主中放多个 AntdUI 子控件时，建议先创建 `AntdUI.BaseForm(winform.host)`，然后让子控件 `Parent = baseForm`。
- 大多数导航组件只是 UI 状态，不会自动切换业务页面，需要在事件中自己处理数据或子窗体显示。

## 分页与表格

`Pagination` 不会自动切换 `Table.DataSource`。常见做法：

1. 保存完整数据源。
2. 监听 `Pagination.ValueChanged`。
3. 按 `Current` 与 `PageSize` 截取当前页。
4. 重新设置表格数据。

## TabHeader 与 Tabs 的区别

- `TabHeader`：轻量标签头，常用于“页签按钮 + 自己管理内容区”。
- `Tabs`：完整容器，使用 `TabPage` 管理内容页，更接近 WinForms TabControl。

如果要搭建类似后台工作台的完整骨架，可参考高级示例：[Menu + Breadcrumb + Tabs 导航工作台](navigation-workbench-showcase.html)。

## 相关文档

- [Breadcrumb 面包屑](../controls/navigation/breadcrumb.html)
- [Dropdown 下拉菜单](../controls/navigation/dropdown.html)
- [Menu 导航菜单](../controls/navigation/menu.html)
- [Tabs 标签页](../controls/data-display/tabs.html)
- [PageHeader 页头](../controls/navigation/page-header.html)
- [TabHeader 多标签页头](../controls/navigation/tab-header.html)
- [Pagination 分页](../controls/navigation/pagination.html)
- [Steps 步骤条](../controls/navigation/steps.html)