导航大菜单 <MegaMenu />

一条网站导航栏（左边文字品牌名、几个菜单项，其中一项展开），下面是展开的大菜单：2–4 列，每列一个等宽小标题和 2–5 个条目（名称 + 一行说明）。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: 总览 · 一个家族的分类
Component: MegaMenu · #mega-menu
Interaction: build 模式下每按一次 → 出现一列

Good for

产品线、版本家族、文档目录这类“有几个大类、每类几项”的总览
想让观众像看官网菜单一样一眼看到全貌

Avoid when

每项要详细说明：用 IconGrid 或拆页
只有一层分类：用 Agenda 或 IconGrid

Content limits

1	brand ≤ 10 个字符，只写文字，不画 logo
2	menu 3–6 项，每项 ≤ 6 字或 ≤ 10 个拉丁字符
3	columns 2–4 列；heading ≤ 8 字
4	items 每列 2–5 个；name ≤ 14 个字符，desc ≤ 16 字（4 列时 ≤ 10 字）

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`brand` · required	`string`	导航栏左侧文字
`menu` · required	`string[]`	菜单项
`active`	`number`	展开的菜单项，默认 0
`columns` · required	`{ heading, icon?, items: { name, desc? }[] }[]`	菜单列

Example

<MegaMenu kicker="版本家族" title="官网把 Fedora 分成四类下载" brand="Fedora" menu={['Editions', 'Atomic', 'Spins', 'Labs']} columns={[{ heading: 'Editions', icon: 'monitor', items: [{ name: 'Workstation', desc: 'GNOME 桌面' }, …] }, …]} />