diff --git a/core/themes/olivero/css/components/navigation/nav-secondary.css b/core/themes/olivero/css/components/navigation/nav-secondary.css
index 407fec1778..2656bbe584 100644
--- a/core/themes/olivero/css/components/navigation/nav-secondary.css
+++ b/core/themes/olivero/css/components/navigation/nav-secondary.css
@@ -13,124 +13,124 @@
 .secondary-nav {
   letter-spacing: 0.02em;
   font-size: 0.875rem;
-  font-weight: 600
+  font-weight: 600;
 }
 
-[dir="ltr"] .secondary-nav ul.menu {
-    margin-left: 0
+[dir="ltr"] .secondary-nav__menu {
+  margin-left: 0;
 }
 
-[dir="rtl"] .secondary-nav ul.menu {
-    margin-right: 0
+[dir="rtl"] .secondary-nav__menu {
+  margin-right: 0;
 }
 
-[dir="ltr"] .secondary-nav ul.menu {
-    margin-right: 0
+[dir="ltr"] .secondary-nav__menu {
+  margin-right: 0;
 }
 
-[dir="rtl"] .secondary-nav ul.menu {
-    margin-left: 0
+[dir="rtl"] .secondary-nav__menu {
+  margin-left: 0;
 }
 
-[dir="ltr"] .secondary-nav ul.menu {
-    padding-left: 0
+[dir="ltr"] .secondary-nav__menu {
+  padding-left: 0;
 }
 
-[dir="rtl"] .secondary-nav ul.menu {
-    padding-right: 0
+[dir="rtl"] .secondary-nav__menu {
+  padding-right: 0;
 }
 
-[dir="ltr"] .secondary-nav ul.menu {
-    padding-right: 0
+[dir="ltr"] .secondary-nav__menu {
+  padding-right: 0;
 }
 
-[dir="rtl"] .secondary-nav ul.menu {
-    padding-left: 0
+[dir="rtl"] .secondary-nav__menu {
+  padding-left: 0;
 }
 
-.secondary-nav ul.menu {
-    display: flex;
-    align-items: center;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    list-style: none
-  }
+.secondary-nav__menu {
+  display: flex;
+  align-items: center;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  list-style: none;
+}
 
-.secondary-nav ul.menu li {
-      /* Parent element is set to flex-basis: 0. We
-       * don't want text to wrap unless it goes over a
-       * certain arbitrary width.
-      */
+.secondary-nav__menu-item {
+  /* Parent element is set to flex-basis: 0. We
+   * don't want text to wrap unless it goes over a
+   * certain arbitrary width.
+   */
 
-      /* @todo should this be scoped to desktop nav? */
-      width: -webkit-max-content;
-      width: max-content;
-      max-width: 12.5rem
-    }
+  /* @todo should this be scoped to desktop nav? */
+  width: -webkit-max-content;
+  width: max-content;
+  max-width: 12.5rem
+}
 
-[dir="ltr"] .secondary-nav ul.menu li:not(:last-child) {
-        margin-right: 1.6875rem
+[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
+    margin-right: 1.6875rem;
 }
 
-[dir="rtl"] .secondary-nav ul.menu li:not(:last-child) {
-        margin-left: 1.6875rem
+[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
+    margin-left: 1.6875rem;
 }
 
-.secondary-nav ul.menu a:not(.button--primary) {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      height: 2.25rem;
-      text-decoration: none;
-      color: inherit
-    }
+.secondary-nav__menu-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 2.25rem;
+  text-decoration: none;
+  color: inherit
+}
 
-.secondary-nav ul.menu a:not(.button--primary):after {
-        position: absolute;
-        /* stylelint-disable csstools/use-logical */
-        bottom: 0;
-        left: 0;
-        /* stylelint-enable csstools/use-logical */
-        width: 100%;
-        height: 0;
-        content: "";
-        transition: opacity 0.2s, transform 0.2s;
-        transform: translateY(0.3125rem);
-        opacity: 0;
-        /* Intentionally not using CSS logical properties. */
-        border-top: solid 2px currentColor;
-      }
+.secondary-nav__menu-link:after {
+    position: absolute;
+    /* stylelint-disable csstools/use-logical */
+    bottom: 0;
+    left: 0;
+    /* stylelint-enable csstools/use-logical */
+    width: 100%;
+    height: 0;
+    content: "";
+    transition: opacity 0.2s, transform 0.2s;
+    transform: translateY(0.3125rem);
+    opacity: 0;
+    /* Intentionally not using CSS logical properties. */
+    border-top: solid 2px currentColor;
+  }
 
-.secondary-nav ul.menu a:not(.button--primary):hover:after {
-          transform: translateY(0);
-          opacity: 0.8;
-        }
+.secondary-nav__menu-link:hover:after {
+      transform: translateY(0);
+      opacity: 0.8;
+    }
 
 @media (min-width: 75rem) {
     [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
-      margin-left: 1.125rem
+      margin-left: 1.125rem;
   }
     [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
-      margin-right: 1.125rem
+      margin-right: 1.125rem;
   }
     [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
-      padding-left: 2.25rem
+      padding-left: 2.25rem;
   }
     [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
-      padding-right: 2.25rem
+      padding-right: 2.25rem;
   }
     body:not(.is-always-mobile-nav) .secondary-nav {
       position: relative;
       display: flex
     }
-        body:not(.is-always-mobile-nav) .secondary-nav .menu__link:focus {
+        body:not(.is-always-mobile-nav) .secondary-nav .secondary-nav__menu-link:focus {
           position: relative;
           outline: 0
         }
 
-          body:not(.is-always-mobile-nav) .secondary-nav .menu__link:focus:before {
+          body:not(.is-always-mobile-nav) .secondary-nav .secondary-nav__menu-link:focus:before {
             position: absolute;
             top: 50%;
             left: 50%;
@@ -143,11 +143,11 @@
           }
 
       [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {
-        left: 0
+        left: 0;
   }
 
       [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {
-        right: 0
+        right: 0;
   }
 
       body:not(.is-always-mobile-nav) .secondary-nav:before {
@@ -160,11 +160,11 @@
         background-color: #d7e1e8;
       }
 
-      [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) {
-        margin-right: 2.25rem
+      [dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav .secondary-nav__menu-item:not(:last-child) {
+        margin-right: 2.25rem;
   }
 
-      [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav ul.menu li:not(:last-child) {
-        margin-left: 2.25rem
+      [dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav .secondary-nav__menu-item:not(:last-child) {
+        margin-left: 2.25rem;
   }
   }
diff --git a/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css b/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
index 95804ef0f8..43678d2e5f 100644
--- a/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
@@ -9,63 +9,63 @@
   letter-spacing: 0.02em;
   font-size: var(--font-size-s);
   font-weight: 600;
+}
 
-  & ul.menu {
-    display: flex;
-    align-items: center;
-    margin-block: 0;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-    padding-block: 0;
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-    list-style: none;
+.secondary-nav__menu {
+  display: flex;
+  align-items: center;
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  list-style: none;
+}
 
-    & li {
-      /* Parent element is set to flex-basis: 0. We
-       * don't want text to wrap unless it goes over a
-       * certain arbitrary width.
-      */
+.secondary-nav__menu-item {
+  /* Parent element is set to flex-basis: 0. We
+   * don't want text to wrap unless it goes over a
+   * certain arbitrary width.
+   */
 
-      /* @todo should this be scoped to desktop nav? */
-      width: max-content;
-      max-width: 200px;
+  /* @todo should this be scoped to desktop nav? */
+  width: max-content;
+  max-width: 200px;
 
-      &:not(:last-child) {
-        margin-inline-end: var(--sp1-5);
-      }
-    }
+  &:not(:last-child) {
+    margin-inline-end: var(--sp1-5);
+  }
+}
 
-    & a:not(.button--primary) {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      height: var(--sp2);
-      text-decoration: none;
-      color: inherit;
+.secondary-nav__menu-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: var(--sp2);
+  text-decoration: none;
+  color: inherit;
 
-      &:after {
-        position: absolute;
-        /* stylelint-disable csstools/use-logical */
-        bottom: 0;
-        left: 0;
-        /* stylelint-enable csstools/use-logical */
-        width: 100%;
-        height: 0;
-        content: "";
-        transition: opacity 0.2s, transform 0.2s;
-        transform: translateY(5px);
-        opacity: 0;
-        /* Intentionally not using CSS logical properties. */
-        border-top: solid 2px currentColor;
-      }
+  &:after {
+    position: absolute;
+    /* stylelint-disable csstools/use-logical */
+    bottom: 0;
+    left: 0;
+    /* stylelint-enable csstools/use-logical */
+    width: 100%;
+    height: 0;
+    content: "";
+    transition: opacity 0.2s, transform 0.2s;
+    transform: translateY(5px);
+    opacity: 0;
+    /* Intentionally not using CSS logical properties. */
+    border-top: solid 2px currentColor;
+  }
 
-      &:hover {
-        &:after {
-          transform: translateY(0);
-          opacity: 0.8;
-        }
-      }
+  &:hover {
+    &:after {
+      transform: translateY(0);
+      opacity: 0.8;
     }
   }
 }
@@ -78,7 +78,7 @@ body:not(.is-always-mobile-nav) {
       margin-inline-start: var(--sp);
       padding-inline-start: var(--sp2);
 
-      & .menu__link {
+      & .secondary-nav__menu-link {
         &:focus {
           position: relative;
           outline: 0;
@@ -108,7 +108,7 @@ body:not(.is-always-mobile-nav) {
         background-color: var(--color--gray-70);
       }
 
-      & ul.menu li:not(:last-child) {
+      & .secondary-nav__menu-item:not(:last-child) {
         margin-inline-end: var(--sp2);
       }
     }
diff --git a/core/themes/olivero/olivero.theme b/core/themes/olivero/olivero.theme
index 4da309a1d6..840a4e5e23 100644
--- a/core/themes/olivero/olivero.theme
+++ b/core/themes/olivero/olivero.theme
@@ -130,6 +130,9 @@ function olivero_preprocess_block(&$variables) {
           $variables['#attached']['library'][] = 'olivero/search-narrow';
         }
       }
+      elseif ($region === 'secondary_menu' && $variables['base_plugin_id'] === 'system_menu_block') {
+        $variables['content']['#attributes']['region'] = $region;
+      }
       elseif ($region === 'secondary_menu' && $variables['base_plugin_id'] === 'search_form_block') {
         // Attaching library for search block if present at secondary menu
         // region.
@@ -158,7 +161,7 @@ function olivero_preprocess_block(&$variables) {
  * Implements hook_theme_suggestions_HOOK_alter() for menu.
  */
 function olivero_theme_suggestions_menu_alter(&$suggestions, array $variables) {
-  if (isset($variables['attributes']['region']) && $variables['attributes']['region'] === 'primary_menu') {
+  if (isset($variables['attributes']['region'])) {
     $suggestions[] = 'menu__' . $variables['attributes']['region'];
   }
 }
diff --git a/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig b/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
index e1217db352..27d01ca3f1 100644
--- a/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
+++ b/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
@@ -1,7 +1,7 @@
 {#
 /**
  * @file
- * Olivero's theme implementation for the main menu.
+ * Olivero's theme implementation for the menus in the primary_menu region.
  *
  * Available variables:
  * - menu_name: The machine name of the menu.
diff --git a/core/themes/olivero/templates/navigation/menu--secondary-menu.html.twig b/core/themes/olivero/templates/navigation/menu--secondary-menu.html.twig
new file mode 100644
index 0000000000..35765a3a92
--- /dev/null
+++ b/core/themes/olivero/templates/navigation/menu--secondary-menu.html.twig
@@ -0,0 +1,70 @@
+{#
+/**
+ * @file
+ * Olivero's theme implementation for the menus in the secondary_menu region.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{% set attributes = attributes.addClass('menu') %}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% import _self as menus %}
+  {% if items %}
+    <ul {{ attributes.addClass('secondary-nav__menu') }}>
+      {% for item in items %}
+
+        {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
+          {% set menu_item_type = 'nolink' %}
+        {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
+          {% set menu_item_type = 'button' %}
+        {% else %}
+          {% set menu_item_type = 'link' %}
+        {% endif %}
+
+        {% set item_classes = [
+            'secondary-nav__menu-item',
+            'secondary-nav__menu-item--' ~ menu_item_type,
+            'secondary-nav__menu-item--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'secondary-nav__menu-item--active-trail',
+            item.below ? 'secondary-nav__menu-item--has-children',
+          ]
+        %}
+
+        {% set link_classes = [
+            'secondary-nav__menu-link',
+            'secondary-nav__menu-link--' ~ menu_item_type,
+            'secondary-nav__menu-link--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'secondary-nav__menu-link--active-trail',
+            item.below ? 'secondary-nav__menu-link--has-children',
+          ]
+        %}
+
+        <li{{ item.attributes.addClass(item_classes) }}>
+          {{ link(item.title, item.url, { 'class': link_classes }) }}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}