Navigator。此功能仍处于实验阶段。“实验性”意味着这是早期实现，可能会发生剧烈且破坏性的变更。渲染带有可选分组和层级的导航列表。
用法
import {
__experimentalNavigation as Navigation,
__experimentalNavigationGroup as NavigationGroup,
__experimentalNavigationItem as NavigationItem,
__experimentalNavigationMenu as NavigationMenu,
} from '@wordpress/components';
const MyNavigation = () => (
<Navigation>
<NavigationMenu title="Home">
<NavigationGroup title="Group 1">
<NavigationItem item="item-1" title="Item 1" />
<NavigationItem item="item-2" title="Item 2" />
</NavigationGroup>
<NavigationGroup title="Group 2">
<NavigationItem
item="item-3"
navigateToMenu="category"
title="Category"
/>
</NavigationGroup>
</NavigationMenu>
<NavigationMenu
backButtonLabel="Home"
menu="category"
parentMenu="root"
title="Category"
>
<NavigationItem badge="1" item="child-1" title="Child 1" />
<NavigationItem item="child-2" title="Child 2" />
</NavigationMenu>
</Navigation>
);
Navigation 属性
Navigation 支持以下属性。
activeItem
- 类型:
string - 是否必需: 否
当前选中项的标识符（slug）。
activeMenu
- 类型:
string - 是否必需: 否
- 默认值: “root”
当前选中菜单的标识符（slug）。
className
- 类型:
string - 是否必需: 否
Navigation 组件的可选 CSS 类名。
onActivateMenu
- 类型:
function - 是否必需: 否
同步外部状态与 Navigation 内部状态的活跃菜单。
Navigation Menu 属性
NavigationMenu 支持以下属性。
backButtonLabel
- 类型:
string - 是否必需: 否
- 默认值: 父级菜单标题或“Back”
在嵌套菜单中使用的返回按钮标签。如果未提供，该标签将根据父级菜单的标题推断得出。
如果由于某些原因无法获取父级菜单的标题，则默认显示为“Back”。
onBackButtonClick
- 类型:
function - 是否必需: 否
处理点击返回按钮的回调函数。如果提供了此属性，则将显示返回按钮。
className
- 类型:
string - 是否必需: 否
NavigationMenu 组件的可选 CSS 类名。
hasSearch
- 类型:
boolean - 是否必需: 否
启用菜单标题上的搜索功能。
menu
- 类型:
string - 是否必需: 否
- 默认值: “root”
菜单的唯一标识符。根菜单可以省略此项，它将默认为“root”；所有其他菜单都需要指定它。
onSearch
- 类型:
( searchString: string ) => void; - 是否必需: 否
当 hasSearch 激活时，此函数处理搜索输入的 onChange 事件，使其从外部受控。同时需要设置 search 属性。
isSearchDebouncing
- 类型:
boolean - 是否必需: 否
指示搜索是否处于防抖状态。如果为 true，则省略“No results found.”文本。用于防止在防抖搜索之间显示“No results found.”文本。
parentMenu
- 类型:
string - 是否必需: 否
父级菜单标识符（slug）；用于嵌套菜单以指示其父级菜单。
search
- 类型:
string - 是否必需: 否
当 hasSearch 激活且提供了 onSearch 时，此属性控制搜索输入的值。当提供 onSearch 属性时必需。
isEmpty
- 类型:
boolean - 是否必需: 否
指示菜单是否为空。与 Navigation Item 的 hideIfTargetMenuEmpty 属性一起使用。
title
- 类型:
string - 是否必需: 否
菜单标题。这也是菜单搜索功能所使用的字段。
titleAction
- 类型:
React.ReactNode - 是否必需: 否
使用此属性在菜单标题中渲染额外的操作。
Navigation Group 属性
NavigationGroup 支持以下属性。
className
- 类型:
string - 是否必需: 否
NavigationGroup 组件的可选 CSS 类名。
title
- 类型:
string - 是否必需: 否
分组标题。
Navigation Item 属性
NavigationItem 支持以下属性。
badge
- 类型:
string|Number - 是否必需: 否
项目徽章内容。
className
- 类型:
string - 是否必需: 否
NavigationItem 组件的可选 CSS 类名。
href
- 类型:
string - 是否必需: 否
如果提供，将渲染 a 标签而不是 button。
icon
- 类型:
React.JSX.Element - 是否必需: 否
如果未传递 children，此属性允许为菜单项指定自定义图标。
item
- 类型:
string - 是否必需: 否
项目的唯一标识符。
navigateToMenu
- 类型:
string - 是否必需: 否
子菜单标识符（slug）。如果提供，点击该项将导航至目标菜单。
hideIfTargetMenuEmpty
- 类型:
boolean - 是否必需: 否
指示如果在 isEmpty 属性中标记了 navigateToMenu 中指定的菜单为空，则应隐藏该项目。与 Navigation Menu 的 isEmpty 属性一起使用。
onClick
- 类型:
React.MouseEventHandler - 是否必需: 否
处理点击菜单项的回调函数。
isText
- 类型:
boolean - 是否必需: 否
- 默认值: false
如果设置为 true，则菜单项仅作为纯文本项，而不是按钮。
title
- 类型:
string - 是否必需: 否
项目标题。