diff --git a/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx b/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
index 13b3988873..970f708157 100644
--- a/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
+++ b/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
@@ -10,6 +10,7 @@ import { ToggleableLinkItem } from './ToggleableLinkItem';
export function PageDocumentItem(props: { page: ClientTOCPageDocument }) {
const { page } = props;
+ const title = page.sidebarTitle || page.title;
return (
@@ -41,10 +42,10 @@ export function PageDocumentItem(props: { page: ClientTOCPageDocument }) {
{page.emoji || page.icon ? (
- {page.title}
+ {title}
) : (
- page.title
+ title
)}
diff --git a/packages/gitbook/src/components/TableOfContents/encodeClientTableOfContents.ts b/packages/gitbook/src/components/TableOfContents/encodeClientTableOfContents.ts
index 3c3820c3f0..470064b5d1 100644
--- a/packages/gitbook/src/components/TableOfContents/encodeClientTableOfContents.ts
+++ b/packages/gitbook/src/components/TableOfContents/encodeClientTableOfContents.ts
@@ -19,6 +19,7 @@ export type ClientTOCPageDocument = {
type: 'document';
id: string;
title: string;
+ sidebarTitle?: string;
href: string;
emoji?: string;
icon?: string;
@@ -73,6 +74,7 @@ export async function encodeClientTableOfContents(
removeUndefined({
id: page.id,
title: page.title,
+ sidebarTitle: page.sidebarTitle,
href,
emoji: page.emoji,
icon: page.icon,