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'
-## VerticalNav
+
+ VerticalNav
+
+ Deprecated
+
+
[APITable "clay-nav/src/Vertical.tsx"]
+
+ VerticalNav
+
+ NEW
+
+
+
+[APITable "clay-core/src/vertical-nav/VerticalNav.tsx"]
+
## VerticalNav.Trigger
Extends from {`React.ComponentProps`}
+
+## VerticalNav.Item
+
+[APITable "clay-core/src/vertical-nav/Item.tsx"]
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 (
+ {
+ items: [
+ {
+ active: true,
+ href: '#5',
+ label: 'Five',
+ },
+ {
+ href: '#6',
+ label: 'Six',
+ },
+ ],
+ label: 'Projects',
+ },
+ {
+ href: '#7',
+ label: 'Seven',
+ },
+ ]}
+ large={false}
+ spritemap={spritemap}
+ >
+ {(item) => (
+
+ {item.label}
+
+ )}
+
);
}
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';