diff --git a/apps/site/tests/e2e/general-behavior.spec.ts b/apps/site/tests/e2e/general-behavior.spec.ts
index 813fabf5ed209..43a398aa4f1be 100644
--- a/apps/site/tests/e2e/general-behavior.spec.ts
+++ b/apps/site/tests/e2e/general-behavior.spec.ts
@@ -9,7 +9,7 @@ const locators = {
   // Navigation elements
   mobileMenuToggleName:
     englishLocale.components.containers.navBar.controls.toggle,
-  navLinksLocator: `[aria-label="${englishLocale.components.containers.navBar.controls.toggle}"] + div`,
+  navLinksLocator: '#navbar-menu',
   // Global UI controls
   languageDropdownName: englishLocale.components.common.languageDropdown.label,
   themeToggleName: englishLocale.components.header.buttons.theme,
@@ -161,6 +161,14 @@ test.describe('Node.js Website', () => {
       // Toggle menu closed and verify it's hidden
       await mobileToggle.click();
       await expect(navLinks.first()).not.toBeVisible();
+
+      // Toggle menu with keyboard and verify it's accessible
+      await mobileToggle.focus();
+      await page.keyboard.press('Enter');
+      await expect(navLinks.first()).toBeVisible();
+
+      await page.keyboard.press('Space');
+      await expect(navLinks.first()).not.toBeVisible();
     });
   });
 });
diff --git a/packages/ui-components/src/Containers/NavBar/index.module.css b/packages/ui-components/src/Containers/NavBar/index.module.css
index 99775c5f02fe4..43372dbfd8501 100644
--- a/packages/ui-components/src/Containers/NavBar/index.module.css
+++ b/packages/ui-components/src/Containers/NavBar/index.module.css
@@ -38,9 +38,16 @@
           flex-1;
       }
 
-      .sidebarItemTogglerLabel {
-        @apply block
+      .sidebarItemTogglerButton {
+        @apply focus-visible:ring-brand-500
+          block
           cursor-pointer
+          appearance-none
+          border-0
+          bg-transparent
+          p-0
+          focus-visible:ring-2
+          focus-visible:outline-none
           xl:hidden;
 
         .navInteractionIcon {
@@ -49,16 +56,6 @@
       }
     }
 
-    .sidebarItemToggler {
-      @apply absolute
-        right-4
-        -z-10
-        size-6
-        -translate-y-[200%]
-        appearance-none
-        opacity-0;
-    }
-
     .main {
       @apply flex-1
         flex-col
diff --git a/packages/ui-components/src/Containers/NavBar/index.tsx b/packages/ui-components/src/Containers/NavBar/index.tsx
index 0d9404b27c521..864b9452eaeaf 100644
--- a/packages/ui-components/src/Containers/NavBar/index.tsx
+++ b/packages/ui-components/src/Containers/NavBar/index.tsx
@@ -1,6 +1,7 @@
+'use client';
+
 import Hamburger from '@heroicons/react/24/solid/Bars3Icon';
 import XMark from '@heroicons/react/24/solid/XMarkIcon';
-import * as Label from '@radix-ui/react-label';
 import classNames from 'classnames';
 import { useState } from 'react';
 
@@ -21,6 +22,8 @@ const navInteractionIcons = {
   close: <XMark className={styles.navInteractionIcon} />,
 };
 
+const navMenuId = 'navbar-menu';
+
 type NavbarProps = {
   navItems?: Array<{
     text: FormattedMessage;
@@ -55,25 +58,25 @@ const NavBar: FC<PropsWithChildren<NavbarProps>> = ({
             <Logo />
           </Component>
 
-          <Label.Root
-            className={styles.sidebarItemTogglerLabel}
-            htmlFor="sidebarItemToggler"
-            role="button"
+          <button
+            className={styles.sidebarItemTogglerButton}
+            type="button"
             aria-label={sidebarItemTogglerAriaLabel}
+            aria-controls={navMenuId}
+            aria-expanded={isMenuOpen}
+            onClick={() => setIsMenuOpen(isOpen => !isOpen)}
           >
             {navInteractionIcons[isMenuOpen ? 'close' : 'show']}
-          </Label.Root>
+          </button>
         </div>
 
-        <input
-          className={classNames('peer', styles.sidebarItemToggler)}
-          id="sidebarItemToggler"
-          type="checkbox"
-          onChange={e => setIsMenuOpen(() => e.target.checked)}
-          aria-label={sidebarItemTogglerAriaLabel}
-          tabIndex={-1}
-        />
-        <div className={classNames(styles.main, `hidden peer-checked:flex`)}>
+        <div
+          id={navMenuId}
+          className={classNames(
+            styles.main,
+            isMenuOpen ? 'flex' : 'hidden xl:flex'
+          )}
+        >
           {navItems && navItems.length > 0 && (
             <div className={styles.navItems}>
               {navItems.map(({ text, link, target }) => (