diff --git a/frontend/src/lib/components/NavbarItem.svelte b/frontend/src/lib/components/NavbarItem.svelte
new file mode 100644
index 00000000..bbe22ba8
--- /dev/null
+++ b/frontend/src/lib/components/NavbarItem.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import {unreachable} from '$lib/assert';
+
+  export let href: string;
+  export let text: string;
+  export let type: 'link' | 'button' = 'link';
+  export let reload = false;
+  export let closeMenu: () => void;
+
+  let linkClass: string;
+  $: switch (type) {
+    case 'link':
+      linkClass = 'navbar-item';
+      break;
+    case 'button':
+      linkClass = 'button';
+      break;
+    default:
+      unreachable(type);
+  }
+</script>
+
+<a class={linkClass} {href} on:click={() => closeMenu()} data-sveltekit-reload={reload || null}>
+  {text}
+</a>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index c8fc65dd..b9ad41da 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {onMount} from 'svelte';
 
+  import NavbarItem from '$lib/components/NavbarItem.svelte';
   import {loginState, refreshLoginState} from '$lib/stores';
 
   let menuOpened = false;
@@ -9,6 +10,10 @@
     menuOpened = !menuOpened;
   }
 
+  function closeMenu(): void {
+    menuOpened = false;
+  }
+
   onMount(() => {
     refreshLoginState();
   });
@@ -46,26 +51,32 @@
   </div>
   <div id="navbar-contents" class="navbar-menu" class:is-active={menuOpened}>
     <div class="navbar-start">
-      <a class="navbar-item" href="/">Home</a>
+      <NavbarItem text="Home" href="/" {closeMenu} />
       {#if $loginState?.username}
-        <a class="navbar-item" href="/gliders/">My Gliders</a>
-        <a class="navbar-item" href="/locations/">My Locations</a>
-        <a class="navbar-item" href="/flights/">My Flights</a>
-        <a class="navbar-item" href="/stats/">Stats</a>
-        <a class="navbar-item" href="/flights/add/">Submit flight</a>
+        <NavbarItem text="My Gliders" href="/gliders/" {closeMenu} />
+        <NavbarItem text="My Locations" href="/locations/" {closeMenu} />
+        <NavbarItem text="My Flights" href="/flights/" {closeMenu} />
+        <NavbarItem text="Stats" href="/stats/" {closeMenu} />
+        <NavbarItem text="Submit flight" href="/flights/add/" {closeMenu} />
       {:else}
-        <a class="navbar-item" href="/screenshots/">Screenshots</a>
+        <NavbarItem text="Screenshots" href="/screenshots/" {closeMenu} />
       {/if}
     </div>
     <div class="navbar-end">
       <div class="navbar-item">
         <div class="buttons">
           {#if $loginState?.username}
-            <a class="button" href="/profile/">Profile</a>
-            <a class="button" href="/auth/logout/" data-sveltekit-reload>Logout</a>
+            <NavbarItem text="Profile" href="/profile/" type="button" {closeMenu} />
+            <NavbarItem
+              text="Logout"
+              href="/auth/logout/"
+              type="button"
+              reload={true}
+              {closeMenu}
+            />
           {:else}
-            <a class="button is-light" href="/auth/login/">Login</a>
-            <a class="button is-light" href="/auth/registration/">Register</a>
+            <NavbarItem text="Login" href="/auth/login/" type="button" {closeMenu} />
+            <NavbarItem text="Register" href="/auth/registration/" type="button" {closeMenu} />
           {/if}
         </div>
       </div>