Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Vertical Navigation

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

installyarn add @clayui/nav
version3.104.0
  • Examples
  • Markup
  • API

Stable3.104.0View in LexiconCHANGELOGstorybook demos

  • Example
  • Custom Links
  • Custom Trigger

Example

Copied!
Code Sample (expand to see it)

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.

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

How can this be improved? Create an issue!