diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
index b7b29bde..b318d632 100644
--- a/docs/guide/extending-default-theme.md
+++ b/docs/guide/extending-default-theme.md
@@ -211,6 +211,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 0ecca7ec..13252953 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 577c8ece..ee9463ad 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -28,6 +28,7 @@ watchEffect(() => {
       <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 c63ceda8..7a57155a 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -48,7 +48,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" />
@@ -167,6 +170,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 64e6f85b..a9b8f2c8 100644
--- a/src/client/theme-default/components/VPNavBarSearch.vue
+++ b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -164,7 +164,6 @@ const provider = __ALGOLIA__ ? 'algolia' : __VP_LOCAL_SEARCH__ ? 'local' : ''
 
 @media (min-width: 768px) {
   .VPNavBarSearch {
-    flex-grow: 1;
     padding-left: 24px;
   }
 }