Vertical Navigation

yarn add @clayui/nav

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

Example
Custom Trigger

Example

Code Sample (expand to see it)

Custom Trigger

In its mobile version, Vertical Navigation adds a trigger that is responsible for opening the menu, in some cases you may want to customize this trigger, for this use the <ClayVerticalNav.Trigger /> component.

<ClayVerticalNav
	trigger={(props) => (
		<ClayVerticalNav.Trigger {...props}>
			<ClayIcon
				focusable="false"
				role="presentation"
				spritemap={spritemap}
				symbol="ellipsis-v"
			/>
		</ClayVerticalNav.Trigger>
	)}
/>

Your custom trigger receives the children property with the default content, for cases when you just want to change the Trigger Button and not its content.

<ClayVerticalNav
	trigger={({onClick}) => (
		<button className="btn btn-secondary" onClick={onClick}>
			<ClayIcon
				focusable="false"
				role="presentation"
				spritemap={spritemap}
				symbol="ellipsis-v"
			/>
		</button>
	)}
/>