diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
index 9982ffb79a1e5c93fa61863d27d3d4db5eb72120..d0500aeedbf5b23c107685c15558e92cbd740923 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
@@ -1,17 +1,20 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'ods-nav-item',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterModule],
   template: `<a
     [routerLink]="to"
+    routerLinkActive="bg-selected-light border-selected"
     [ngClass]="[
       'flex min-h-8 items-center gap-2 rounded-2xl px-4 py-2',
-      'border-2 border-transparent hover:border-primary',
-      'outline-2 outline-offset-2 focus-visible:outline-focus',
+      'border border-transparent hover:border-primary',
+      'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200',
     ]"
+    role="menuitem"
   >
     <ng-content select="[icon]" />
     <p class="text-left text-sm text-text">{{ caption }}</p>
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts
index 73614a5b1db84729f668e403e5d9cf41b9014fd3..434dfd07e04e16bcb5c8c36a5b6e975e8fdfe2f9 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts
@@ -5,8 +5,10 @@ import { Component } from '@angular/core';
   selector: 'ods-navbar',
   standalone: true,
   imports: [CommonModule],
-  template: `<nav class="flex h-full w-72 flex-col gap-1 bg-ozggray p-4">
-    <ng-content />
+  template: `<nav class="h-full w-72 bg-ozggray p-4">
+    <div class="flex flex-col gap-2" role="menubar">
+      <ng-content />
+    </div>
   </nav>`,
 })
 export class NavbarComponent {}
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
index 58e3326529d661baec6f48df547ebc9db547536a..75c8278d688cbad31e50e591df1738fd29099ec3 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
@@ -1,4 +1,7 @@
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { APP_BASE_HREF } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 import { OfficeIconComponent } from '../../icons/office-icon/office-icon.component';
 import { NavItemComponent } from '../nav-item/nav-item.component';
 import { NavbarComponent } from './navbar.component';
@@ -9,8 +12,17 @@ const meta: Meta<NavbarComponent> = {
   excludeStories: /.*Data$/,
   tags: ['autodocs'],
   decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(RouterModule.forRoot([]))],
+    }),
     moduleMetadata({
       imports: [NavItemComponent, OfficeIconComponent],
+      providers: [
+        {
+          provide: APP_BASE_HREF,
+          useValue: '/',
+        },
+      ],
     }),
   ],
 };
@@ -22,9 +34,9 @@ export const Default: Story = {
   args: {},
   render: () => ({
     template: `<ods-navbar>
-      <ods-nav-item caption="First link"><ods-office-icon icon /></ods-nav-item>
-      <ods-nav-item caption="Second link"><ods-office-icon icon /></ods-nav-item>
-      <ods-nav-item caption="Third link"><ods-office-icon icon /></ods-nav-item>
+      <ods-nav-item caption="First link" to="/"><ods-office-icon icon /></ods-nav-item>
+      <ods-nav-item caption="Second link" to="/second"><ods-office-icon icon /></ods-nav-item>
+      <ods-nav-item caption="Third link" to="/third"><ods-office-icon icon /></ods-nav-item>
     </ods-navbar>`,
   }),
 };
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index f998ef819768fb984e0e5c28789c3b93f769497c..cb8ed07e1d8c25e88620f6a60df143c9e7da8dfb 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+++ b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
@@ -94,6 +94,10 @@ module.exports = {
           700: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
           DEFAULT: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
         },
+        selected: {
+          light: 'hsl(212, 58%, 94%)',
+          DEFAULT: 'hsl(216, 85%, 34%)',
+        },
         pdf: {
           DEFAULT: 'hsl(var(--color-pdf) / <alpha-value>)',
         },