diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 501a25ed1c..2258de26f9 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -60,6 +60,7 @@
     "@spectrum-css/progresscircle": "^1.0.2",
     "@spectrum-css/radio": "^3.0.2",
     "@spectrum-css/search": "^3.0.2",
+    "@spectrum-css/sidenav": "^3.0.2",
     "@spectrum-css/switch": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
diff --git a/packages/bbui/src/SideNavigation/Item.svelte b/packages/bbui/src/SideNavigation/Item.svelte
new file mode 100644
index 0000000000..44a0d01d4d
--- /dev/null
+++ b/packages/bbui/src/SideNavigation/Item.svelte
@@ -0,0 +1,29 @@
+<script>
+    import { getContext } from 'svelte'
+    const multilevel = getContext('sidenav-type');
+    export let href = "";
+    export let heading = ""
+    export let icon = "";
+    export let selected = false;
+    export let disabled = false;
+
+</script>
+
+<li class="spectrum-SideNav-item" class:is-selected={selected} class:is-disabled={disabled}>
+    {#if heading}
+        <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">{heading}</h2>
+    {/if}
+    <a {href} class="spectrum-SideNav-itemLink" aria-current="page">
+        {#if icon}
+            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-icon-18-{icon}" />
+            </svg>
+        {/if}
+        <slot />
+    </a>
+    {#if multilevel && $$slots.subnav}
+        <ul class="spectrum-SideNav">
+            <slot name="subnav" />
+        </ul>
+    {/if}
+</li>
\ No newline at end of file
diff --git a/packages/bbui/src/SideNavigation/Navigation.svelte b/packages/bbui/src/SideNavigation/Navigation.svelte
new file mode 100644
index 0000000000..1400f0a508
--- /dev/null
+++ b/packages/bbui/src/SideNavigation/Navigation.svelte
@@ -0,0 +1,12 @@
+<script>
+    import { setContext } from 'svelte'
+    import "@spectrum-css/sidenav/dist/index-vars.css"
+    export let multilevel = false;
+    setContext('sidenav-type', multilevel)
+</script>
+
+<nav>
+  <ul class="spectrum-SideNav" class:spectrum-SideNav--multiLevel={multilevel}>
+    <slot />
+  </ul>
+</nav>
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index dae40aac47..bce2008f95 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -38,6 +38,8 @@ export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
 export { default as Spacer } from "./Spacer/Spacer.svelte"
+export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
+export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
 export { default as DatePicker } from "./Form/DatePicker.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Context } from "./context"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 80eeb3ebba..c4fa11535c 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -181,6 +181,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/search/-/search-3.0.2.tgz#70e93e321032d40b399498b2324e3b70e050551e"
   integrity sha512-3UbT8yZmNOwrZxq+CUmumE+26ZySZ8OoKNM6U20SLMPLgdx6MrRugVE88r3Bl0sJ0RZX/5bU8nausdiHeX+Jlw==
 
+"@spectrum-css/sidenav@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.2.tgz#9d70f408d588ee79c69857751010333671f32713"
+  integrity sha512-YpIdH/F0jEICYmoduGrnkTmxwJq1kfKxEp0wOs+ZkQOsvKMv1an7nyhsfOKCQqcGNfYzJ9mJAk7/u5+vsxHa8g==
+
 "@spectrum-css/switch@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/switch/-/switch-1.0.2.tgz#f0b4c69271964573e02b08e90998096e49e1de44"