diff --git a/components/Sidenav/src/SidenavLinkLabel.tsx b/components/Sidenav/src/SidenavLinkLabel.tsx
new file mode 100644
index 000000000..ea17ce508
--- /dev/null
+++ b/components/Sidenav/src/SidenavLinkLabel.tsx
@@ -0,0 +1,15 @@
+import React, { HTMLAttributes } from 'react';
+import clsx from 'clsx';
+
+export interface SidenavLinkLabelProps extends HTMLAttributes<HTMLSpanElement> {}
+
+export const SidenavLinkLabel = ({ className, ...props }: SidenavLinkLabelProps) => {
+  const classNames = clsx('denhaag-sidenav__link-label', className);
+  return (
+    <span {...props} className={classNames}>
+      {props.children}
+    </span>
+  );
+};
+
+export default SidenavLinkLabel;
diff --git a/components/Sidenav/src/index.scss b/components/Sidenav/src/index.scss
index b8ac31fbc..f6f364e18 100644
--- a/components/Sidenav/src/index.scss
+++ b/components/Sidenav/src/index.scss
@@ -40,6 +40,11 @@
   padding-block-end: var(--denhaag-sidenav-link-padding-block-end);
 }
 
+.denhaag-sidenav__link-label {
+  display: inline-flex;
+  gap: var(--denhaag-sidenav-link-label-gap);
+}
+
 .denhaag-sidenav__link:hover,
 .denhaag-sidenav__link--hover {
   color: var(--denhaag-sidenav-link-hover-color);
diff --git a/components/Sidenav/src/index.tsx b/components/Sidenav/src/index.tsx
index 35b22172b..2ad68f2d9 100644
--- a/components/Sidenav/src/index.tsx
+++ b/components/Sidenav/src/index.tsx
@@ -4,3 +4,4 @@ export * from './Sidenav';
 export * from './SidenavItem';
 export * from './SidenavList';
 export * from './SidenavLink';
+export * from './SidenavLinkLabel';
diff --git a/packages/storybook/src/css/Sidenav.stories.tsx b/packages/storybook/src/css/Sidenav.stories.tsx
index 99db9d735..2323e7b0d 100644
--- a/packages/storybook/src/css/Sidenav.stories.tsx
+++ b/packages/storybook/src/css/Sidenav.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { BadgeCounter } from '@gemeente-denhaag/badge-counter';
-import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '@gemeente-denhaag/sidenav';
+import { Sidenav, SidenavItem, SidenavLink, SidenavList, SidenavLinkLabel } from '@gemeente-denhaag/sidenav';
 import { ArchiveIcon, CheckCircleIcon, GridIcon, InboxIcon, UserIcon } from '@gemeente-denhaag/icons';
 import readme from '../../../../components/Sidenav/README.md?raw';
 
@@ -26,8 +26,10 @@ const exampleArgs = {
         <SidenavItem>
           <SidenavLink href={'/#'}>
             <InboxIcon />
-            Mijn berichten
-            <BadgeCounter>2</BadgeCounter>
+            <SidenavLinkLabel>
+              Mijn berichten
+              <BadgeCounter>2</BadgeCounter>
+            </SidenavLinkLabel>
           </SidenavLink>
         </SidenavItem>
         <SidenavItem>
diff --git a/packages/storybook/src/react/Sidenav.stories.tsx b/packages/storybook/src/react/Sidenav.stories.tsx
index 265db77a6..7572680d4 100644
--- a/packages/storybook/src/react/Sidenav.stories.tsx
+++ b/packages/storybook/src/react/Sidenav.stories.tsx
@@ -1,7 +1,7 @@
 import { BadgeCounter } from '@gemeente-denhaag/badge-counter';
 import tokens from '@gemeente-denhaag/design-tokens-components/dist/list.json';
 import { ArchiveIcon, CheckCircleIcon, GridIcon, InboxIcon, UserIcon } from '@gemeente-denhaag/icons';
-import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '@gemeente-denhaag/sidenav';
+import { Sidenav, SidenavItem, SidenavLink, SidenavList, SidenavLinkLabel } from '@gemeente-denhaag/sidenav';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import readme from '../../../../components/Sidenav/README.md?raw';
@@ -28,8 +28,10 @@ const exampleArgs = {
         <SidenavItem>
           <SidenavLink href={'/#'}>
             <InboxIcon />
-            Mijn berichten
-            <BadgeCounter>2</BadgeCounter>
+            <SidenavLinkLabel>
+              Mijn berichten
+              <BadgeCounter>2</BadgeCounter>
+            </SidenavLinkLabel>
           </SidenavLink>
         </SidenavItem>
         <SidenavItem>
diff --git a/packages/storybook/src/templates/components/Sidenav.tsx b/packages/storybook/src/templates/components/Sidenav.tsx
index daa66ea74..cf765f562 100644
--- a/packages/storybook/src/templates/components/Sidenav.tsx
+++ b/packages/storybook/src/templates/components/Sidenav.tsx
@@ -1,5 +1,11 @@
 import { ArchiveIcon, CheckCircleIcon, GridIcon, InboxIcon, UserIcon } from '@gemeente-denhaag/icons';
-import { Sidenav as SidenavComponent, SidenavItem, SidenavLink, SidenavList } from '@gemeente-denhaag/sidenav';
+import {
+  Sidenav as SidenavComponent,
+  SidenavItem,
+  SidenavLink,
+  SidenavLinkLabel,
+  SidenavList,
+} from '@gemeente-denhaag/sidenav';
 import { BadgeCounter } from '@utrecht/component-library-react';
 import React from 'react';
 
@@ -24,8 +30,10 @@ const Sidenav = () => {
         <SidenavItem>
           <SidenavLink>
             <InboxIcon />
-            Mijn berichten
-            <BadgeCounter>2</BadgeCounter>
+            <SidenavLinkLabel>
+              Mijn berichten
+              <BadgeCounter>2</BadgeCounter>
+            </SidenavLinkLabel>
           </SidenavLink>
         </SidenavItem>
         <SidenavItem>
diff --git a/proprietary/Components/src/denhaag/sidenav.tokens.json b/proprietary/Components/src/denhaag/sidenav.tokens.json
index 16f17fd8b..9f2a5acbd 100644
--- a/proprietary/Components/src/denhaag/sidenav.tokens.json
+++ b/proprietary/Components/src/denhaag/sidenav.tokens.json
@@ -22,6 +22,9 @@
         "margin-inline-end": { "value": "0" }
       },
       "link": {
+        "label": {
+          "gap": { "value": "{denhaag.space.inline.xs}" }
+        },
         "padding-block-start": { "value": "12px" },
         "padding-block-end": { "value": "12px" },
         "color": { "value": "{denhaag.color.grey.4}" },