Vertical Navigation
An alternative patterns that displays navigation items in a vertical menu.
install | yarn add @clayui/nav |
---|---|
version | 3.123.0 |
Stable3.123.0View in LexiconCHANGELOG
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 Deprecatedstring | Label of item that is currently active. @deprecated since version 3.3.x |
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. |
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 Deprecatedboolean | 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. |