diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx
index 7b9d97dce..430cb2d98 100644
--- a/apps/website/screens/components/header/code/HeaderCodePage.tsx
+++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx
@@ -12,6 +12,10 @@ const itemTypeString = `{
   label: string;
   onSelect?: () => void;
   selected?: boolean;
+  href?: string;
+  renderItem?:
+    (props: { children: ReactNode })
+    => ReactNode;
 }`;
 
 const groupItemTypeString = `{
@@ -73,6 +77,10 @@ const sections = [
                 Being <Code>Item</Code> an object with the following properties:
               </p>
               <ExtendedTableCode>{itemTypeString}</ExtendedTableCode>
+              <p>
+                The <Code>renderItem</Code> property allows wrapping the item with custom routing components (e.g.,
+                Next.js <Code>Link</Code>) that require children to be passed.
+              </p>
               <p>
                 and <Code>GroupItem</Code> an object with the following properties:
               </p>
diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
index 1b67dfc4d..a14e3861e 100644
--- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
+++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
@@ -12,6 +12,10 @@ const itemTypeString = `{
   ${commonItemTypeString}
   onSelect?: () => void;
   selected?: boolean;
+  href?: string;
+  renderItem?:
+    (props: { children: ReactNode })
+    => ReactNode;
 }`;
 
 const groupItemTypeString = `{ 
@@ -125,10 +129,18 @@ const sections = [
             </td>
             <td>
               <TableCode>{"(Item | GroupItem)[] | Section[]"}</TableCode>
+            </td>
+            <td>
+              Array of items to be displayed in the navigation menu. Each item can be a single/simple item, a group item
+              or a section.
               <p>
-                being <Code>Item</Code> an object with the following properties:
+                Being <Code>Item</Code> an object with the following properties:
               </p>
               <ExtendedTableCode>{itemTypeString}</ExtendedTableCode>
+              <p>
+                The <Code>renderItem</Code> property allows wrapping the item with custom routing components (e.g.,
+                Next.js <Code>Link</Code>) that require children to be passed.
+              </p>
               <p>
                 , <Code>GroupItem</Code> an object with the following properties:
               </p>
@@ -138,10 +150,6 @@ const sections = [
               </p>
               <ExtendedTableCode>{sectionTypeString}</ExtendedTableCode>
             </td>
-            <td>
-              Array of items to be displayed in the navigation menu. Each item can be a single/simple item, a group item
-              or a section.
-            </td>
             <td>-</td>
           </tr>
           <tr>
diff --git a/packages/lib/src/sidenav/types.ts b/packages/lib/src/sidenav/types.ts
index f1a9fc5e0..460ee830a 100644
--- a/packages/lib/src/sidenav/types.ts
+++ b/packages/lib/src/sidenav/types.ts
@@ -1,6 +1,6 @@
-import { ReactElement, ReactNode } from "react";
-import { SVG } from "../common/utils";
+import { ReactNode } from "react";
 import { SearchBarProps } from "../search-bar/types";
+import { GroupItem, Item } from "../base-menu/types";
 
 type Section = { items: (Item | GroupItem)[]; title?: string };
 
@@ -47,18 +47,4 @@ type Props = {
   topContent?: ReactNode;
 };
 
-type CommonItemProps = {
-  badge?: ReactElement;
-  icon?: string | SVG;
-  label: string;
-};
-type Item = CommonItemProps & {
-  onSelect?: () => void;
-  selected?: boolean;
-};
-type GroupItem = CommonItemProps & {
-  defaultOpen?: boolean;
-  items: (Item | GroupItem)[];
-};
-
 export default Props;