Vertical Navigation
View in LexiconAn alternative patterns that displays navigation items in a vertical menu.
| install | yarn add @clayui/nav |
|---|---|
| version |  |
| use | import {ClayVerticalNav} from '@clayui/nav'; |
Table of Contents
Example
import {Provider} from '@clayui/core'; import {ClayVerticalNav} from '@clayui/nav'; import React, {useState} from 'react'; import '@clayui/css/lib/css/atlas.css'; export default function App() { return ( <Provider spritemap="/public/icons.svg"> <div className="p-4"> <ClayVerticalNav aria-label="vertical navbar" active="6" defaultExpandedKeys={new Set(['5'])} items={[ { id: '1', items: [ { id: '2', href: '#nested1', label: 'Nested1', }, ], label: 'Home', }, { id: '3', href: '#2', label: 'About', }, { id: '4', href: '#3', label: 'Contact', }, { id: '5', items: [ { id: '6', href: '#5', label: 'Five', }, { id: '7', href: '#6', label: 'Six', }, ], label: 'Projects', }, { id: '8', href: '#7', label: 'Seven', }, ]} large={false} > {(item) => ( <ClayVerticalNav.Item href={item.href} items={item.items} key={item.id} > {item.label} </ClayVerticalNav.Item> )} </ClayVerticalNav> </div> </Provider> ); }
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.
import {Provider} from '@clayui/core'; import {ClayVerticalNav} from '@clayui/nav'; import Icon from '@clayui/icon'; import React, {useState} from 'react'; import '@clayui/css/lib/css/atlas.css'; const noIcons = ['1', '5']; export default function App() { return ( <Provider spritemap="/public/icons.svg"> <div className="p-4"> <ClayVerticalNav aria-label="vertical navbar" active="6" defaultExpandedKeys={new Set(['5'])} items={[ { id: '1', items: [ { id: '2', href: '#nested1', label: 'Nested1', }, ], label: 'Home', }, { id: '3', href: '#2', label: 'About', }, { id: '4', href: '#3', label: 'Contact', }, { id: '5', items: [ { id: '6', href: '#5', label: 'Five', }, { id: '7', href: '#6', label: 'Six', }, ], label: 'Projects', }, { id: '8', href: '#7', label: 'Seven', }, ]} large={false} > {(item) => ( <ClayVerticalNav.Item href={item.href} items={item.items} key={item.id} > {item.label} {!noIcons.includes(item.id) && ( <span class="inline-item inline-item-after"> <Icon symbol="lock" /> </span> )} </ClayVerticalNav.Item> )} </ClayVerticalNav> </div> </Provider> ); }
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
aria-label="vertical navbar"
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
aria-label="vertical navbar"
trigger={({onClick}) => (
<button className="btn btn-secondary" onClick={onClick}>
<ClayIcon
focusable="false"
role="presentation"
spritemap={spritemap}
symbol="ellipsis-v"
/>
</button>
)}
/>Table of Contents