diff --git a/docs/config/theme-config.md b/docs/config/theme-config.md
index 96c9fdd2..43dfc4b7 100644
--- a/docs/config/theme-config.md
+++ b/docs/config/theme-config.md
@@ -87,15 +87,22 @@ export default {
```ts
type NavItem = NavItemWithLink | NavItemWithChildren
-type NavItemWithLink = {
+interface NavItemWithLink {
text: string
link: string
activeMatch?: string
+ target?: string
+ rel?: string
}
-interface NavItemWithChildren {
+interface NavItemChildren {
text?: string
items: NavItemWithLink[]
+}
+
+interface NavItemWithChildren {
+ text?: string
+ items: (NavItemChildren | NavItemWithLink)[]
activeMatch?: string
}
```
diff --git a/docs/guide/theme-nav.md b/docs/guide/theme-nav.md
index 784f5dc7..2c82d649 100644
--- a/docs/guide/theme-nav.md
+++ b/docs/guide/theme-nav.md
@@ -138,6 +138,25 @@ export default {
`activeMatch` is expected to be a regex string, but you must define it as a string. We can't use actual RegExp object here because it isn't serializable during the build time.
:::
+### Customize link's "target" and "rel" attributes
+
+By default, VitePress automatically determines `target` and `rel` attributes based on whether the link is an external link. But if you want, you can customize them too.
+
+```js
+export default {
+ themeConfig: {
+ nav: [
+ {
+ text: 'Merchandise',
+ link: 'https://www.thegithubshop.com/',
+ target: '_self',
+ rel: 'sponsored'
+ }
+ ]
+ }
+}
+```
+
## Social Links
Refer [`socialLinks`](../config/theme-config#sociallinks).
diff --git a/src/client/theme-default/components/VPLink.vue b/src/client/theme-default/components/VPLink.vue
index f10bff04..6033a7be 100644
--- a/src/client/theme-default/components/VPLink.vue
+++ b/src/client/theme-default/components/VPLink.vue
@@ -8,6 +8,8 @@ const props = defineProps<{
tag?: string
href?: string
noIcon?: boolean
+ target?: string
+ rel?: string
}>()
const tag = computed(() => props.tag ?? props.href ? 'a' : 'span')
@@ -20,8 +22,8 @@ const isExternal = computed(() => props.href && EXTERNAL_URL_RE.test(props.href)
class="VPLink"
:class="{ link: href }"
:href="href ? normalizeLink(href) : undefined"
- :target="isExternal ? '_blank' : undefined"
- :rel="isExternal ? 'noreferrer' : undefined"
+ :target="target || (isExternal ? '_blank' : undefined)"
+ :rel="rel || (isExternal ? 'noreferrer' : undefined)"
>
diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index 909d233e..a4176608 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -1,10 +1,11 @@