README
title: 'Nav' description: 'Clay Nav provides a clear and semantic navigation for your site' packageNpm: '@clayui/nav'
import {Navigation, VerticalNavigation} from '$packages/clay-nav/docs/index';
Basic Usage
Vertical Navigation
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>
)}
/>