Vertical Navigation

Stable3.123.0View in LexiconCHANGELOG

Example

Custom Links

The markup between the <ClayVerticalNav.Item> tag will render inside the nav-link. In the example below, we are outputting the lock icon next to the label only for non collapsible items.

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>
	)}
/>