diff --git a/src/components/NavigationBar/NavigationBar.svelte b/src/components/NavigationBar/NavigationBar.svelte
index 235a03c8..19f9aa84 100644
--- a/src/components/NavigationBar/NavigationBar.svelte
+++ b/src/components/NavigationBar/NavigationBar.svelte
@@ -65,6 +65,7 @@
 	import SideMenuList from './SideMenuList.svelte';
 	import SideMenuPane from './SideMenuPane.svelte';
 	import PromiseIcon from '$components/icons/PromiseIcon.svelte';
+	import { setContext } from 'svelte';
 
 	let screenSize: number;
 	let previousFromTop = 0;
@@ -87,6 +88,10 @@
 		previousFromTop = currentFromTop;
 		sideNavActive = false;
 	}
+
+	setContext('closeSideNav', () => {
+		sideNavActive = false;
+	});
 </script>
 
 <svelte:window bind:innerWidth={screenSize} on:scroll={scrollEventHandler} />
diff --git a/src/components/NavigationBar/SideMenuLink.svelte b/src/components/NavigationBar/SideMenuLink.svelte
index 7e2cbe3e..e22ab9e9 100644
--- a/src/components/NavigationBar/SideMenuLink.svelte
+++ b/src/components/NavigationBar/SideMenuLink.svelte
@@ -2,8 +2,12 @@
 	import type { Menu } from '$models/menu';
 	import ArrowUpRightIcon from 'carbon-icons-svelte/lib/ArrowUpRight.svelte';
 	import { twMerge } from 'tailwind-merge';
+	import { getContext } from 'svelte';
+
 	export let linkMenu: Menu;
 	export let additionalClass = '';
+
+	const closeSideNav: () => void = getContext('closeSideNav');
 </script>
 
 {#if linkMenu.type === 'link'}
@@ -12,6 +16,7 @@
 	</div>
 {/if}
 <a
+	on:click={closeSideNav}
 	href={linkMenu.url}
 	class={twMerge(
 		'flex w-screen items-center pl-4 text-gray-30 no-underline decoration-gray-30 transition-all duration-200 hover:text-gray-10 md:w-80',