feat(sidebar): Change component to SidebarTextItem

docs/en/reference/default-theme-nav.md

@@ -161,6 +161,27 @@ export default {
 
 Refer [`socialLinks`](./default-theme-config#sociallinks).
 
+## Custom Text Item Component
+
+If you want to use the default theme but modify only the text of the items, you can override the `SidebarTextItem` inside the `enhanceApp` function. For example:
+
+```js
+// .vitepress/theme/index.js
+import DefaultTheme from 'vitepress/theme';
+import CustomSidebarTextItem from './components/CustomSidebarTextItem.vue';
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('SidebarTextItem', CustomSidebarTextItem);
+  }
+};
+```
+
+### Creating a Custom `SidebarTextItem`
+
+To create your own `SidebarTextItem`, define a Vue component that accepts a `content` prop and renders it inside a chosen HTML tag. This allows you to fully customize how the text appears while maintaining compatibility with the default theme.
+
 ## Custom Components
 
 You can include custom components in the navigation bar by using the `component` option. The `component` key should be the Vue component name, and must be registered globally using [Theme.enhanceApp](../guide/custom-theme#theme-interface).

src/client/app/components/SidebarTextItem.ts

@@ -0,0 +1,17 @@
+import { defineComponent, h } from 'vue'
+
+export const SidebarTextItem = defineComponent({
+  props: {
+    content: {
+      type: String,
+      required: true
+    },
+    is: {
+      type: [Object, String],
+      default: 'p'
+    }
+  },
+  render() {
+    return h(this.is, { innerHTML: this.content })
+  }
+})

src/client/app/index.ts

@@ -17,6 +17,7 @@ import { usePrefetch } from './composables/preFetch'
 import { dataSymbol, initData, siteDataRef, useData } from './data'
 import { RouterSymbol, createRouter, scrollTo, type Router } from './router'
 import { inBrowser, pathToFile } from './utils'
+import { SidebarTextItem } from './components/SidebarTextItem'
 
 function resolveThemeExtends(theme: typeof RawTheme): typeof RawTheme {
   if (theme.extends) {
@@ -78,6 +79,7 @@ export async function createApp() {
   // install global components
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
+  app.component('SidebarTextItem', SidebarTextItem)
 
   // expose $frontmatter & $params
   Object.defineProperties(app.config.globalProperties, {

src/client/theme-default/components/VPSidebarItem.vue

@@ -77,9 +77,9 @@ function onCaretClick() {
         :rel="item.rel"
         :target="item.target"
       >
-        <component :is="textTag" class="text" v-html="item.text" />
+        <SidebarTextItem :is="textTag" class="text" :content="item.text" />
       </VPLink>
-      <component v-else :is="textTag" class="text" v-html="item.text" />
+      <SidebarTextItem v-else :is="textTag" class="text" :content="item.text" />
 
       <div
         v-if="item.collapsed != null && item.items && item.items.length"