diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
index 71aabec6..b9eb1dfa 100644
--- a/docs/guide/extending-default-theme.md
+++ b/docs/guide/extending-default-theme.md
@@ -195,6 +195,7 @@ Full list of slots available in the default theme layout:
   - `nav-bar-title-before`
   - `nav-bar-title-after`
   - `nav-bar-content-before`
+  - `nav-bar-content-middle`
   - `nav-bar-content-after`
   - `nav-screen-content-before`
   - `nav-screen-content-after`
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 52bb16b2..f104cb9b 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -39,6 +39,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
+      <template #nav-bar-content-middle><slot name="nav-bar-content-middle" /></template>
       <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
       <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
       <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index b654a043..51d5f5f5 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -15,6 +15,7 @@ provide('close-screen', closeScreen)
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
       <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
+      <template #nav-bar-content-middle><slot name="nav-bar-content-middle" /></template>
       <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
     </VPNavBar>
     <VPNavScreen :open="isScreenOpen">
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 755da68e..471633ee 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -49,7 +49,10 @@ watchPostEffect(() => {
         <div class="curtain" />
         <div class="content-body">
           <slot name="nav-bar-content-before" />
-          <VPNavBarSearch class="search" />
+          <div class="content-body-context">
+            <VPNavBarSearch class="search" />
+            <slot name="nav-bar-content-middle" />
+          </div>
           <VPNavBarMenu class="menu" />
           <VPNavBarTranslations class="translations" />
           <VPNavBarAppearance class="appearance" />
@@ -168,6 +171,11 @@ watchPostEffect(() => {
   transition: background-color 0.5s;
 }
 
+.content-body-context {
+  display: flex;
+  flex-grow: 1;
+}
+
 @media (min-width: 960px) {
   .VPNavBar:not(.top) .content-body{
     position: relative;
diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
index 32d78880..f0e7c00b 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -188,7 +188,6 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
 
 @media (min-width: 768px) {
   .VPNavBarSearch {
-    flex-grow: 1;
     padding-left: 24px;
   }
 }