diff --git a/examples/configured/.vitepress/config.js b/examples/configured/.vitepress/config.js
index 6b0795c789c0..75ece0e4cee6 100644
--- a/examples/configured/.vitepress/config.js
+++ b/examples/configured/.vitepress/config.js
@@ -16,6 +16,15 @@ export default defineConfig({
             }
           ]
         },
+        {
+          text: '& &#60;Text Literals &> <code>code</code>',
+          items: [
+            {
+              text: '& &#60;Test Page &> <code>code</code>',
+              link: '/text-literals/'
+            }
+          ]
+        },
         {
           text: 'Static Data',
           items: [
diff --git a/examples/configured/__test__/multisidebar.spec.ts b/examples/configured/__test__/multisidebar.spec.ts
index ed7e4f881658..e6a19e2b86cf 100644
--- a/examples/configured/__test__/multisidebar.spec.ts
+++ b/examples/configured/__test__/multisidebar.spec.ts
@@ -17,6 +17,7 @@ describe('test multi sidebar sort root', () => {
     const sidebarContent = await sidebarLocator.allTextContents()
     expect(sidebarContent).toEqual([
       'Frontmatter',
+      '& <Text Literals &> code',
       'Static Data',
       'Multi Sidebar Test'
     ])
diff --git a/examples/configured/text-literals/index.md b/examples/configured/text-literals/index.md
new file mode 100644
index 000000000000..14b5f619b7e5
--- /dev/null
+++ b/examples/configured/text-literals/index.md
@@ -0,0 +1,5 @@
+---
+title: Text Literals
+---
+
+# Text Literals Test
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 31adc7842b59..848ab1439007 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -42,14 +42,14 @@ const showFooter = computed(() => {
     <div v-if="control.prev || control.next" class="prev-next">
       <div class="pager">
         <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
-          <span class="desc">{{ theme.docFooter?.prev ?? 'Previous page' }}</span>
-          <span class="title">{{ control.prev.text }} </span>
+          <span class="desc" v-html="theme.docFooter?.prev ?? 'Previous page'"></span>
+          <span class="title" v-html="control.prev.text"></span>
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
         <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
-          <span class="desc">{{ theme.docFooter?.next ?? 'Next page' }}</span>
-          <span class="title">{{ control.next.text }}</span>
+          <span class="desc" v-html="theme.docFooter?.next ?? 'Next page'"></span>
+          <span class="title" v-html="control.next.text"></span>
         </a>
       </div>
     </div>