Navigation · Navigation
Navigation
A menu list that provides navigation for pages and features.

Demos

How to import

Basic Usage

By passing items Parameters, you can quickly get a navigation bar.
Each navigation item includes:
  • itemKey: The unique identity of the navigation project (must)
  • text: Navigation copywriting
  • icon: Navigation icon
For the meaning of the parameters, see Nav.Item Or Nav.Sub
Version: >= 0.16.0
Navigation indentation is currently effective only for first-level navigation.

Pure Copywriting Navigation

If the navigation project doesn't come in, icon field, then the copy will be automatically filled to the left.

Define The Head And Bottom

Developers may often define the Logo area and the put away button area, while Navigation provides such a container for developers to quickly define the navigation head and bottom, and you only need to pass in the header or Footer as required.
For footer, semi-ui extra encapsulates a pull-up feature button that developers can pass through collapseButton = true to turn on the function, but the parameter takes effect only with mode = "vertical" (Vertical navigation).
For the parameters, see Nav.Header and Nav.Footer.
Navigation currently provides two parameters to define navigation styles:style and bodyStyle, in which style The style used to define the outermost layer of the navigation component, while bodyStyle The style used to define the navigation list. (Both the navigation head and the bottom of the navigation accept their respective style Parameters).
For example, you need a navigation list to scroll, navigate the head and bottom fixed navigation components, which can be used this way:

JSX Writing

Users can use JSX to define navigation headers, navigation items, and navigation bottoms.
Navigation currently offers navigation in two directions:
  • Vertical (default)
  • Horizontal
You can pass mode = "vertical" (default) or mode = "horizontal" to control.
In particular, there are some functions (parameters) only in mode = "vertical" effective:
  • isCollapsed (Navigation put away to the side)
  • defaultOpenKeys | openKeys (Specifies the default and controlled array of expanded subnavigation items key, which is valid only in mode = "vertical"and isCollapsed = false)
  • collapseButton of Footer

Vertical Direction

Horizontal Direction

Horizontal Plus Vertical

The general platform design will adopt the mode of horizontal and vertical navigation. Here is a common example.

Expand and collapse arrow position

toggleIconPosition set 'left' or 'right', default right

Indentation limit

No indentation by default. If you need to indent the navigation items according to the level, please set limitIndent to false
When using Nav.Item to pass navigation items in React Jsx mode, please pass level props to Nav.Item manually.
Object method No need to care about level when passing in navigation items.
limitIndent only takes effect in the vertical direction.

Uncontrolled Properties

Including:
  • defaultSelectedKeys (default selected navigation item key array)
  • defaultOpenKeys (default expanded navigation item key array, valid only with mode = "vertical" and isCollapsed = false | defaultIsCollapsed = false)
  • defaultIsCollapsed (whether the sidebar is closed by default, valid only when mode = "vertical")

Controlled Properties

The Navigation component provides several controlled properties that, combined with a variety of callbacks, can easily control navigation.
The properties currently controlled are:
  • isCollapsed(whether the sidebar is closed, effective only when mode="vertical")
  • selectedKeys (currently selected navigation item key array)
  • openKeys (currently expanded array of navigation items, only mode="vertical" and isCollapsed=false valid)
The corresponding callback is:
  • onCollapseChange(isCollapsed: boolean) => void
  • onSelect ({ itemKey: string, selectedKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void
  • onOpenChange ({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void

API Reference

PropertiesTypeDescriptionDefault
bodyStyleCustom style for navigation item listobject
classNameStyle name of outermost elementboolean
defaultIsCollapsedWhether the default is put away, valid only when mode = "vertical"booleanfalse
defaultOpenKeysInitially open sub navigation itemKey array, valid only mode = "vertical"and the sidebar is in an expanded statestring[][]
defaultSelectedKeysOriginally selected navigation item itemKey arraystring[][]
footerThe bottom area configure objects or elements, see Nav.Footerobject|ReactNode
headerHead area configuration objects or elements, see Nav.Headerobject|ReactNode
isCollapsedA controlled attribute of whether it is in a put-away state, valid only when mode = "vertical"boolean
itemsNavigate the list of items, each item can continue with the items property. If it is a string array, each item is taken as text and itemKeyobject|string[]|Item[]|Sub[]
modeNavigation type, currently supports horizontal and vertical, optional value: vertical|horizontalstringvertical
onClickTrigger when clicking on any navigation item({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void() = > {}
onCollapseChangeThe callback when the state changes.(is Collapsed: boolean) => void() = > {}
onOpenChangeTriggers when switching the hidden state of a sub navigation project({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void() = > {}
onSelectTriggers the first time you select an optional navigation project, where the selected Items field version > = 0.17.0 is supported({ itemKey: string, selectedKeys: string[], selectedItems: Item[], domEvent: MouseEvent, isOpen: boolean }) => void() = > {}
openKeysControlled open sub navigation itemKey array, expanded with onOpenChange callback control sub navigation items, valid only mode = "vertical"and the sidebar is in an unfolding statestring[]
selectedKeysControlled navigation item itemKey array, with onSelect callback control navigation item selectionstring[]
styleCustom styles for outermost elementsobject
subNavCloseDelayDelay of sub navigation floating layer closure. Effective when the limit is true or mode is "limit" in MSnumber100
subNavOpenDelayThe delay displayed by the sub navigation floating layer. Effective when the input is true or mode is "selected" in MSnumber0
tooltipHideDelayThe latency hidden by tooltip is valid when it is true in MSnumber100
tooltipShowDelayThe delay displayed by tooltip is valid when it is true in MSnumber0
limitIndentTo lift the indentation limit, you can use level to customize the indentation of navigation items. The horizontal mode can only be true >=1.27.0booleantrue
toggleIconPositionParent navigation item arrow position with child navigation items >=1.27.0'left' | 'right''right'
PropertiesDescriptionTypeDefaultVersion
disabledDisabled statebooleanfalse1.17.0
iconNavigation project icon name or componentReactNode
indentIf the icon is empty, keep its space or not. Only effective for first level navigationbooleanfalse
itemKeyNavigation project only keystring""
levelThe nesting level of the current item. When limitIndent is true, it is used to customize the indentation positionnumber1.27.0
linkNavigation item href link, when imported, the navigation item will be wrapped with an a tagstring-1.0.0
linkOptionsParameters transparently passed to the a tagobject-1.0.0
textNavigation project copy or elementstring | ReactNode""
onClickCallback of clickfunction({ itemKey: string, domEvent: MouseEvent, isOpen: boolean })() => {}
onMouseEnterCallback of mouse enter eventfunction(e) => {}() => {}
onMouseLeaveCallback of mouse leave eventfunction(e) => {}() => {}
PropertiesDescriptionTypeDefault
disabledDisabled statebooleanfalse
dropdownStyleStyle of dropdown layerCSSProperties
iconNavigation project icon name or componentReactNode
indentIf the icon is empty, keep its space or not. Only effective for first level navigationbooleanfalse
isCollapsedWhether it is a controlled attribute in the collapsed state, only mode = "vertical"booleanfalse
isOpenControl open statebooleanfalse
itemKeyNavigation project only keystring""
levelThe nesting level of the current item. When limitIndent is true, it is used to customize the indentation positionnumber1.27.0
maxHeightmax heightnumber999
textNavigation project copy or componentstring | ReactNode""
onMouseEnterCallback of mouse enter eventfunction(e) => {}() => {}
onMouseLeaveCallback of mouse leave eventfunction(e) => {}() => {}
PropertiesDescriptionTypeDefaultVersion
childrenSub elementReactNode
classNameOutermost style namestring
linkNavigation item href link, when imported, the navigation item will be wrapped with an a tagstring-1.0.0
linkOptionsParameters transparently passed to the a tagobject-1.0.0
logoLogo, can be a string or componentstring | ReactNode
styleOutermost styleobject
textLogo copy, which can be a string or componentstring | ReactNode
PropertiesDescriptionTypeDefaultVersion
childrenSub elementReactNode
classNameOutermost style namestring
collapseButtonDo you show the bottom "put away the sidebar" button, mode = "vertical" and the child parameter of the Footer component is empty?boolean|ReactNodefalse
collapseTextTitle of the collapse button(collapsed:boolean) => string|ReactNode0.35.0
styleOutermost styleobject

Content Guidelines

  • Navigation bar menu uses sentence case format
  • Keep it as simple as possible

Design Tokens

FAQ

  • Lost animation in navigation bar?
    When using functional components, you should give items with useState or useMemo, because passing an array directly to items will trigger component rerendering.
  • Lost item when subNav is too height >=999px ? Please refer to this issue

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED