diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-colorblind-linux.png
new file mode 100644
index 00000000000..f3d7905d565
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-dimmed-linux.png
new file mode 100644
index 00000000000..b80a00be1ea
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..2aaa19fd9fb
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-linux.png
new file mode 100644
index 00000000000..f3d7905d565
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..f3d7905d565
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-colorblind-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-colorblind-linux.png
new file mode 100644
index 00000000000..d57cb657f7f
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-high-contrast-linux.png
new file mode 100644
index 00000000000..e6be6bfc182
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-linux.png
new file mode 100644
index 00000000000..d57cb657f7f
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-tritanopia-linux.png
new file mode 100644
index 00000000000..d57cb657f7f
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Default-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-colorblind-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-colorblind-linux.png
new file mode 100644
index 00000000000..4c608fb019c
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-dimmed-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-dimmed-linux.png
new file mode 100644
index 00000000000..016d1815637
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..6cb1757ea75
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-linux.png
new file mode 100644
index 00000000000..7890b396da3
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-tritanopia-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..4c608fb019c
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-colorblind-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-colorblind-linux.png
new file mode 100644
index 00000000000..865fa5f03ed
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-high-contrast-linux.png
new file mode 100644
index 00000000000..bf54b235514
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-linux.png
new file mode 100644
index 00000000000..0e2db7713d0
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-tritanopia-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-tritanopia-linux.png
new file mode 100644
index 00000000000..865fa5f03ed
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Full-Variant-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-colorblind-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-colorblind-linux.png
new file mode 100644
index 00000000000..0f9c72a1437
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-dimmed-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-dimmed-linux.png
new file mode 100644
index 00000000000..6078a43654c
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..e48547b6c1a
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-linux.png
new file mode 100644
index 00000000000..0f9c72a1437
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-tritanopia-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..0f9c72a1437
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-colorblind-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-colorblind-linux.png
new file mode 100644
index 00000000000..db98c6b4dc5
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-high-contrast-linux.png
new file mode 100644
index 00000000000..0ff06c0b1cb
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-linux.png
new file mode 100644
index 00000000000..db98c6b4dc5
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-tritanopia-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-tritanopia-linux.png
new file mode 100644
index 00000000000..db98c6b4dc5
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Nested-Variant-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-colorblind-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-colorblind-linux.png
new file mode 100644
index 00000000000..a819b943a7b
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-dimmed-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-dimmed-linux.png
new file mode 100644
index 00000000000..d2ac17dbe9d
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..b124525401e
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-linux.png
new file mode 100644
index 00000000000..a819b943a7b
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-tritanopia-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..a819b943a7b
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-colorblind-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-colorblind-linux.png
new file mode 100644
index 00000000000..8dc8fd8746d
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-high-contrast-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-high-contrast-linux.png
new file mode 100644
index 00000000000..ff4b810bcd3
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-linux.png
new file mode 100644
index 00000000000..8dc8fd8746d
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-linux.png differ
diff --git a/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-tritanopia-linux.png b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-tritanopia-linux.png
new file mode 100644
index 00000000000..8dc8fd8746d
Binary files /dev/null and b/.playwright/snapshots/components/SideNav.test.ts-snapshots/SideNav-Lightweight-Variant-light-tritanopia-linux.png differ
diff --git a/e2e/components/SideNav.test.ts b/e2e/components/SideNav.test.ts
new file mode 100644
index 00000000000..7f63bafaeff
--- /dev/null
+++ b/e2e/components/SideNav.test.ts
@@ -0,0 +1,56 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'deprecated-components-sidenav-dev--default',
+  },
+  {
+    title: 'Full Variant',
+    id: 'deprecated-components-sidenav-dev--full-variant',
+  },
+  {
+    title: 'Lightweight Variant',
+    id: 'deprecated-components-sidenav-dev--lightweight-variant',
+  },
+  {
+    title: 'Lightweight Nested Variant',
+    id: 'deprecated-components-sidenav-dev--lightweight-nested-variant',
+  },
+] as const
+
+test.describe('SideNav', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `SideNav.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})
diff --git a/packages/react/src/stories/deprecated/SideNav.dev.stories.tsx b/packages/react/src/stories/deprecated/SideNav.dev.stories.tsx
new file mode 100644
index 00000000000..12e8e170641
--- /dev/null
+++ b/packages/react/src/stories/deprecated/SideNav.dev.stories.tsx
@@ -0,0 +1,130 @@
+import {Avatar, Box, CounterLabel, Heading, Label, SideNav, Text} from '../..'
+import type {Meta} from '@storybook/react'
+import React from 'react'
+import type {ComponentProps} from '../../utils/types'
+import Octicon from '../../Octicon'
+import {DotIcon, MailIcon, PersonIcon, SmileyIcon, ZapIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Deprecated/Components/SideNav/Dev',
+  component: SideNav,
+} as Meta<ComponentProps<typeof SideNav>>
+
+export const Default = () => (
+  <SideNav bordered aria-label="Main">
+    <SideNav.Link href="#account">
+      <Text>Account</Text>
+    </SideNav.Link>
+    <SideNav.Link href="#home" selected>
+      <Text>Profile</Text>
+    </SideNav.Link>
+    <SideNav.Link href="#emails">
+      <Text>Emails</Text>
+    </SideNav.Link>
+    <SideNav.Link href="#notifications">
+      <Text>Notifications</Text>
+    </SideNav.Link>
+  </SideNav>
+)
+
+export const FullVariant = () => (
+  <SideNav bordered aria-label="Main">
+    <SideNav.Link href="#url">
+      <Text>Text Only</Text>
+    </SideNav.Link>
+    <SideNav.Link href="#url">
+      <Avatar size={16} src="https://avatars.githubusercontent.com/hubot?s=32" />
+      <Text>With an avatar</Text>
+    </SideNav.Link>
+    <SideNav.Link href="#url">
+      <Octicon size={16} icon={ZapIcon} />
+      <Text>With an Octicon</Text>
+    </SideNav.Link>
+    <SideNav.Link href="#url" variant="full" selected>
+      <Text>With a status icon</Text>
+      <Octicon size={16} icon={DotIcon} color="success.fg" />
+    </SideNav.Link>
+    <SideNav.Link href="#url" variant="full">
+      <Text>With a label</Text>
+      <Label>label</Label>
+    </SideNav.Link>
+    <SideNav.Link href="#url" variant="full">
+      <Text>With a counter</Text>
+      <CounterLabel>16</CounterLabel>
+    </SideNav.Link>
+    <SideNav.Link href="#url">
+      <Heading as="h5">A heading</Heading>
+      <Text>and some more content</Text>
+    </SideNav.Link>
+  </SideNav>
+)
+
+export const LightweightVariant = () => (
+  <Box
+    borderWidth="1px"
+    borderStyle="solid"
+    borderColor="border.default"
+    borderRadius={2}
+    p={3}
+    backgroundColor="canvas.subtle"
+    maxWidth={360}
+  >
+    <Box
+      borderStyle="solid"
+      borderColor="border.default"
+      borderWidth={0}
+      borderBottomWidth={1}
+      borderRadius={0}
+      mb={2}
+      pb={1}
+    >
+      <Heading as="h2" color="fg.muted">
+        Menu
+      </Heading>
+    </Box>
+    <SideNav variant="lightweight">
+      <SideNav.Link href="#url">
+        <Text>Account</Text>
+      </SideNav.Link>
+      <SideNav.Link href="#url" selected>
+        <Text>Profile</Text>
+      </SideNav.Link>
+      <SideNav.Link href="#url">
+        <Text>Emails</Text>
+      </SideNav.Link>
+      <SideNav.Link href="#url">
+        <Text>Notifications</Text>
+      </SideNav.Link>
+    </SideNav>
+  </Box>
+)
+
+export const LightweightNestedVariant = () => (
+  <SideNav bordered aria-label="Main">
+    <SideNav.Link href="#url">
+      <Octicon size={16} icon={PersonIcon} />
+      <Text>Account</Text>
+    </SideNav.Link>
+    <SideNav.Link href="#url" selected>
+      <Octicon size={16} icon={SmileyIcon} />
+      <Text>Profile</Text>
+    </SideNav.Link>
+
+    <SideNav bordered variant="lightweight">
+      <SideNav.Link href="#url" selected>
+        <Text>Sub item 1</Text>
+      </SideNav.Link>
+      <SideNav.Link href="#url">
+        <Text>Sub item 2</Text>
+      </SideNav.Link>
+      <SideNav.Link href="#url">
+        <Text>Sub item 3</Text>
+      </SideNav.Link>
+    </SideNav>
+
+    <SideNav.Link href="#url">
+      <Octicon size={16} icon={MailIcon} />
+      <Text>Emails</Text>
+    </SideNav.Link>
+  </SideNav>
+)