Vertical Navigation

An alternative patterns that displays navigation items in a vertical menu.

install	yarn add @clayui/nav
version	3.124.0

Stable 3.124.0 View in Lexicon CHANGELOG

VerticalNav
VerticalNav.Trigger

VerticalNavDeprecated

Property	Description
`itemAriaCurrent` `boolean`	Flag to define if the item represents the current page. Disable this attribute only if there are multiple navigations on the page.
`activation` `'manual' \| 'automatic'`	Flag to indicate the navigation behavior in the menu. - manual - it will just move the focus and menu activation is done just by pressing space or enter. - automatic - moves the focus to the menuitem and activates the menu.
`activeLabel`Deprecated `string`	Label of item that is currently active. @deprecated since version 3.3.x
`displayType` `null \| 'primary'`	Determines the Vertical Nav variant to use.
`decorated` `boolean`	Flag to activate the Decorator variation.
`triggerLabel` `string`	Label of the button that appears on smaller resolutions to open the vertical navigation. The default value is 'Menu'
`items` `Array<IItemWithItems>`	List of items.
`large` `boolean`	Flag to indicate if `menubar-vertical-expand-lg` class is applied.
`trigger`	Custom component that will be displayed on mobile resolutions that toggles the visibility of the navigation.
`spritemap` `string`	Path to the spritemap that Icon should use when referencing symbols.

VerticalNavNEW

Property	Description
`active` `React.Key`	Flag to define which item has the active state/current page.
`activation` `'manual' \| 'automatic'`	Flag to indicate the navigation behavior in the menu. - manual - it will just move the focus and menu activation is done just by pressing space or enter. - automatic - moves the focus to the menuitem and activates the menu. The default value is 'manual'
`children` `React.ReactNode \| ChildrenFunction<T, null>`	The component contents.
`displayType` `null \| 'primary'`	Determines the Vertical Nav variant to use.
`decorated` `boolean`	Flag to activate the Decorator variation.
`defaultExpandedKeys` `Set<React.Key>`	Property to set the initial value of `expandedKeys` (uncontrolled). The default value is new Set()
`expandedKeys` `Set<React.Key>`	The currently expanded keys in the collection (controlled).
`itemAriaCurrent` `boolean`	Flag to define if the item represents the current page. Disable this attribute only if there are multiple navigations on the page. The default value is true
`items` `Array<T>`	Property to inform the dynamic data of the tree.
`large` `boolean`	Flag to indicate if `menubar-vertical-expand-lg` class is applied.
`onExpandedChange` `InternalDispatch<Set<React.Key>>`	A callback that is called when items are expanded or collapsed (controlled).
`spritemap` `string`	Path to the spritemap that Icon should use when referencing symbols.
`trigger` `Trigger`	Custom component that will be displayed on mobile resolutions that toggles the visibility of the navigation. The default value is ({ children, className, ...otherProps }: React.ComponentProps<typeof Button>) => ( <Button className={classNames(className, 'menubar-toggler')} displayType="unstyled" {...otherProps} > {children} </Button> )
`triggerLabel` `string`	Label of the button that appears on smaller resolutions to open the vertical navigation. The default value is 'Menu'

VerticalNav.Trigger

Extends from React.ComponentProps<typeof ClayButton>

VerticalNav.Item

Property	Description
`active`Deprecated `boolean`	Flag to indicate if item is active. @deprecated since version 3.94.0 - uses the `active` property on the root component.
`children` `React.ReactNode`	The contents of the component.
`href` `string`	Link href for item.
`items` `Array<T>`	Property to inform the dynamic data of the tree.
`menubarAction` `{ ariaLabel: string; title: string; }`	Properties to pass to the menubar action