{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>It provides top navigation and side navigation, the top navigation provides global categories and functions, and the side navigation provides a multi-level structure to store and arrange the site architecture.</p>\n<h3 id=\"Note\">Note <a class=\"header-anchor scroll-count-item\" href=\"#Note\" data-scroll-id=\"Note\">#</a></h3>\n<ul>\n<li>\n<p>iconOnly only works with the vertical direction.</p>\n</li>\n<li>\n<p>The property of Nav inherits from Menu, so in addition to special instructions, you can use the API of Menu.</p>\n</li>\n</ul>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Nav\">Nav <a class=\"header-anchor scroll-count-item\" href=\"#Nav\" data-scroll-id=\"Nav\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>Navigation item and sub navigation</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultOpenAll</td>\n<td>Open all subnavs default, only when mode is set to &apos;inline&apos; and openMode is set to &apos;multiple&apos;</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>mode</td>\n<td>Sub navigation open mode (horizontal navigation only supports pop up)</td>\n<td>&apos;inline&apos; | &apos;popup&apos;</td>\n<td>&apos;inline&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>triggerType</td>\n<td>Sub navigation open trigger</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>openMode</td>\n<td>The open mode of inline sub navigation, expand a peer navigation or multiple navigations at the same level at same time, it only works in inline mode</td>\n<td>&apos;single&apos; | &apos;multiple&apos;</td>\n<td>&apos;multiple&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>inlineIndent</td>\n<td>Inline sub navigation indent distance</td>\n<td>number</td>\n<td>20</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupAlign</td>\n<td>Pop up sub navigation alignment (horizontal navigation only supports follow)</td>\n<td>&apos;follow&apos; | &apos;outside&apos;</td>\n<td>&apos;follow&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Pop up navigation custom class name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>selectedKeys</td>\n<td>Keys of selected nav item currently</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultSelectedKeys</td>\n<td>Keys of selected nav item in default</td>\n<td>string | Array&lt;string&gt;</td>\n<td>[]</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSelect</td>\n<td>Callback function triggered when select or unselect nav item<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>selectedKeys</em>: Keys of selected nav item<br><em>item</em>: Current operation nav item<br><em>extra</em>: Extra parameters</td>\n<td>(selectedKeys: string[], item: SelectableItem, extra: SelectExtra) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>direction</td>\n<td>Layout of navigation</td>\n<td>&apos;hoz&apos; | &apos;ver&apos;</td>\n<td>&apos;ver&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hozAlign</td>\n<td>Alignment of items in the horizontal nav bar, only works when direction is set to &apos;hoz&apos; and the header exists</td>\n<td>&apos;left&apos; | &apos;right&apos;</td>\n<td>&apos;left&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>header</td>\n<td>Custom navigation head</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>footer</td>\n<td>Custom navigation footer</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>embeddable</td>\n<td>Whether to enable embedded mode</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.18</td>\n</tr>\n<tr>\n<td>type</td>\n<td>Type of navigation</td>\n<td>&apos;normal&apos; | &apos;primary&apos; | &apos;secondary&apos; | &apos;line&apos;</td>\n<td>&apos;normal&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>activeDirection</td>\n<td>The active border direction of the selected item</td>\n<td>null | &apos;top&apos; | &apos;bottom&apos; | &apos;left&apos; | &apos;right&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>iconOnly</td>\n<td>Whether to show only icons</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>iconTextOnly</td>\n<td>Whether to show text in iconOnly mode (only works when iconOnly=true)</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>iconOnlyWidth</td>\n<td>IconOnly mode width (only works when iconOnly=true)</td>\n<td>number | string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasArrow</td>\n<td>Whether to show arrow (only works when iconOnly=true)</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasTooltip</td>\n<td>Whether to show tooltip (only works when iconOnly=true)</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Nav Group\">Nav.Group <a class=\"header-anchor scroll-count-item\" href=\"#Nav Group\" data-scroll-id=\"Nav Group\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Content of label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Navigation item and sub navigation</td>\n<td>React.ReactChild | React.ReactChild[]</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Nav Item\">Nav.Item <a class=\"header-anchor scroll-count-item\" href=\"#Nav Item\" data-scroll-id=\"Nav Item\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>icon</td>\n<td>Custom icon, can use Icon&apos;s type or <code>&lt;Icon type=&quot;your type&quot; /&gt;</code></td>\n<td>string | React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of navigation check item</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Nav Popup Item\">Nav.PopupItem <a class=\"header-anchor scroll-count-item\" href=\"#Nav Popup Item\" data-scroll-id=\"Nav Popup Item\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Content of label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Content of popup</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>icon</td>\n<td>Custom icon, can use Icon&apos;s type or <code>&lt;Icon type=&quot;your type&quot; /&gt;</code></td>\n<td>string | React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Nav Sub Nav\">Nav.SubNav <a class=\"header-anchor scroll-count-item\" href=\"#Nav Sub Nav\" data-scroll-id=\"Nav Sub Nav\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>icon</td>\n<td>Custom icon, can use Icon&apos;s type or <code>&lt;Icon type=&quot;your type&quot; /&gt;</code></td>\n<td>string | React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>label</td>\n<td>Content of label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>selectable</td>\n<td>Whether is selectable</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Navigation item and sub navigation</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>noIcon</td>\n<td>Whether to show the icon of current item</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Up Arrow</td>\n<td style=\"text-align:left\">navigate to previous item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Down Arrow</td>\n<td style=\"text-align:left\">navigate to next item</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Right Arrow</td>\n<td style=\"text-align:left\">open the submenu, navigate to the first item of the submenu; horizontal menu bar first level, navigate to the right one</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Left Arrow</td>\n<td style=\"text-align:left\">close the submenu, navigate to the parent menu; horizontal menu bar first level, navigation to the left one</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">open submenu and navigate to the first item of the submenu</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Esc</td>\n<td style=\"text-align:left\">close submenu and navigate to the parent menu item</td>\n</tr>\n</tbody>\n</table>\n"}