diff --git a/packages/clay-nav/docs/api-vertical-nav.mdx b/packages/clay-nav/docs/api-vertical-nav.mdx
index 92263bfdef..9c6b6ace2b 100644
--- a/packages/clay-nav/docs/api-vertical-nav.mdx
+++ b/packages/clay-nav/docs/api-vertical-nav.mdx
@@ -13,12 +13,30 @@ mainTabURL: 'docs/components/vertical-nav.html'
 </div>
 </div>
 
-## VerticalNav
+<h2 class="clay-h2" id="autocomplete-deprecated">
+	VerticalNav
+	<span class="ml-1 badge badge-danger badge-pill">
+		<span class="badge-item badge-item-expand">Deprecated</span>
+	</span>
+</h2>
 
 <div>[APITable "clay-nav/src/Vertical.tsx"]</div>
 
+<h2 class="clay-h2" id="autocomplete-deprecated">
+	VerticalNav
+	<span class="ml-1 badge badge-info badge-pill">
+		<span class="badge-item badge-item-expand">NEW</span>
+	</span>
+</h2>
+
+<div>[APITable "clay-core/src/vertical-nav/VerticalNav.tsx"]</div>
+
 ## VerticalNav.Trigger
 
 <code class="list-api-item-type">
 	Extends from {`React.ComponentProps<typeof ClayButton>`}
 </code>
+
+## VerticalNav.Item
+
+<div>[APITable "clay-core/src/vertical-nav/Item.tsx"]</div>
diff --git a/packages/clay-nav/docs/index.js b/packages/clay-nav/docs/index.js
index e5d69bcb65..53a57805ec 100644
--- a/packages/clay-nav/docs/index.js
+++ b/packages/clay-nav/docs/index.js
@@ -47,47 +47,58 @@ const verticalNavigationImportsCode = `import {ClayVerticalNav} from '@clayui/na
 const VerticalNavigationCode = `const Component = () => {
 	return (
 		<ClayVerticalNav
+			defaultExpandedKeys={new Set(['Projects'])}
 			items={[
-			{
-				items: [
 				{
-					href: '#nested1',
-					label: 'Nested1',
+					items: [
+						{
+							href: '#nested1',
+							label: 'Nested1',
+						},
+					],
+					label: 'Home',
 				},
-				],
-				label: 'Home',
-			},
-			{
-				href: '#2',
-				label: 'About',
-			},
-			{
-				href: '#3',
-				label: 'Contact',
-			},
-			{
-				initialExpanded: true,
-				items: [
 				{
-					active: true,
-					href: '#5',
-					label: 'Five',
+					href: '#2',
+					label: 'About',
 				},
 				{
-					href: '#6',
-					label: 'Six',
+					href: '#3',
+					label: 'Contact',
 				},
-				],
-				label: 'Projects',
-			},
-			{
-				href: '#7',
-				label: 'Seven',
-			},
-		]}
-		large={false}
-		spritemap={spritemap}
-	  />
+				{
+					items: [
+						{
+							active: true,
+							href: '#5',
+							label: 'Five',
+						},
+						{
+							href: '#6',
+							label: 'Six',
+						},
+					],
+					label: 'Projects',
+				},
+				{
+					href: '#7',
+					label: 'Seven',
+				},
+			]}
+			large={false}
+			spritemap={spritemap}
+		>
+			{(item) => (
+				<ClayVerticalNav.Item
+					active={item.active}
+					href={item.href}
+					items={item.items}
+					key={item.label}
+				>
+					{item.label}
+				</ClayVerticalNav.Item>
+			)}
+		</ClayVerticalNav>
 	);
 }
 
diff --git a/packages/clay-nav/docs/vertical-nav.mdx b/packages/clay-nav/docs/vertical-nav.mdx
index e18d254663..75fc5d4537 100644
--- a/packages/clay-nav/docs/vertical-nav.mdx
+++ b/packages/clay-nav/docs/vertical-nav.mdx
@@ -3,7 +3,7 @@ title: 'Vertical Navigation'
 description: 'An alternative patterns that displays navigation items in a vertical menu.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/vertical-nav/'
 packageNpm: '@clayui/nav'
-storybookPath: 'design-system-components-nav--vertical-nav'
+storybookPath: 'design-system-components-verticalnav--default'
 ---
 
 import {VerticalNavigation} from '$packages/clay-nav/docs/index';