diff --git a/exampleSite/content/docs/getting-started/index.md b/exampleSite/content/docs/getting-started/index.md
index 401ae1b5..379d8a6c 100644
--- a/exampleSite/content/docs/getting-started/index.md
+++ b/exampleSite/content/docs/getting-started/index.md
@@ -151,9 +151,9 @@ When you create a new taxonomy, you will need to adjust the navigation links on
 
 ## Menus
 
-Blowfish has two menus that can be customised to suit the content and layout of your site. The `main` menu appears in the site header and the `footer` menu appears at the bottom of the page just above the copyright notice.
+Blowfish has 3 menus that can be customised to suit the content and layout of your site. The `main` menu appears in the site header, the `subnavigation` menu just below `main` and the `footer` menu appears at the bottom of the page just above the copyright notice.
 
-Both menus are configured in the `menus.en.toml` file. Similarly to the languages config file, if you wish to use another language, rename this file and replace `en` with the language code you wish to use.
+All of them can be configured in the `menus.en.toml` file. Similarly to the languages config file, if you wish to use another language, rename this file and replace `en` with the language code you wish to use.
 
 ```toml
 # config/_default/menus.toml
@@ -180,6 +180,16 @@ Both menus are configured in the `menus.en.toml` file. Similarly to the language
   url = "https://github.com/nunocoracao/blowfish"
   weight = 40
 
+[[subnavigation]]
+  name = "An interesting topic"
+  pageRef = "tags/interesting-topic"
+  weight = 10
+
+[[subnavigation]]
+  name = "My Awesome Category"
+  pageRef = "categories/awesome"
+  weight = 20
+
 [[footer]]
   name = "Privacy"
   url = "https://external-link"
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index 0da1855d..3574ddc5 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -1,5 +1,5 @@
 <div style="padding-left:0;padding-right:0"
-    class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
+    class="site-header flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
     {{ if .Site.Params.Logo -}}
     {{ $logo := resources.Get .Site.Params.Logo }}
     {{ if $logo }}
@@ -15,14 +15,14 @@
     {{ end }}
     {{- end }}
     <div class="flex flex-1 items-center justify-between">
-        <nav class="flex space-x-3">
+        <nav class="site-header-title flex space-x-3">
 
             <a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{ .Site.Title | markdownify
                 | emojify }}</a>
             
             
         </nav>
-        <div class="hidden md:flex items-center space-x-5 md:ml-12">
+        <div class="site-header-menu-main hidden md:flex items-center space-x-5 md:ml-12">
 
             {{ if .Site.Menus.main }}
             {{ range .Site.Menus.main }}
@@ -117,8 +117,41 @@
                     {{ end }}
                     {{ end }}
 
+                    {{ if .Site.Menus.subnavigation }}
+                    <p>-</p>
+                    {{ range .Site.Menus.subnavigation }}
+                    <li class="mb-1">
+                      <a {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{ end }}
+                          class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="{{ .URL }}"
+                          title="{{ .Title }}">
+                        <span class="inline-block align-text-bottom">{{ partial "icon.html" .Pre }}</span>
+                        {{ if and .Pre .Name }} &nbsp; {{ end }}
+                        {{ .Name | markdownify | emojify }}
+                      </a>
+                    </li>
+                    {{ end }}
+                    {{ end }}
+
                 </ul>
             </div>
         </label>
     </div>
 </div>
+
+{{ if .Site.Menus.subnavigation }}
+<div class="site-header-menu-subnavigation flex items-center justify-between md:justify-start space-x-3">
+  <div class="flex flex-1 items-center justify-between">
+    <div class="hidden md:flex items-center space-x-5">
+      {{ range .Site.Menus.subnavigation }}
+      <a href="{{ .URL }}" class="prose dark:prose-invert"
+          {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{ end }}
+          class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        {{ partial "icon.html" .Pre }}
+        {{ if and .Pre .Name }} &nbsp; {{ end }}
+        {{ .Name | markdownify | emojify }}
+      </a>
+      {{ end }}
+    </div>
+  </div>
+</div>
+{{ end }}