diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
index 44b715b182..128c730060 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -11,20 +11,36 @@
   font-size: 1.266rem;
   font-weight: 400;
   line-height: 1.2;
-  max-height: 0;
+  max-height: 18.75rem;
   overflow: hidden;
   padding: 0;
-  transition: max-height 0.5s ease-in;
 }
-.menu-main--active {
+
+.menu-main--collapsed {
   /**
    * An exact max-height value must be set to make possible to animate the menu display.
    * It my not be much larger than the content because that would break the animation.
    * See: https://css-tricks.com/using-css-transitions-auto-dimensions/
    */
-  max-height: 18.75rem;
+  max-height: 0;
   overflow-y: auto;
 }
+.menu-main--collapsed li {
+  visibility: hidden;
+  transition: visibility 0.5s ease-in;
+}
+
+.menu-main--transition {
+  transition: max-height 0.5s ease-in;
+}
+
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .menu-main--transition {
+    transition: 0s;
+  }
+}
+
 .menu-main-toggle {
   width: 41px;
   height: 41px;
@@ -37,16 +53,20 @@
   text-align: left;
   background-color: transparent;
 }
+
 .menu-main-toggle:hover {
   background-color: transparent;
 }
+
 .menu-main-toggle svg {
   display: block;
 }
+
 .menu-main__item {
   margin-top: 0.8em;
   text-align: center;
 }
+
 .menu-main__link {
   background-color: inherit;
   display: inline-block;
@@ -64,6 +84,7 @@
   border-bottom-color: rgba(255, 97, 56, 0.3);
   color: #da3c13;
 }
+
 .menu-main__link:active,
 .menu-main__link.is-active {
   text-decoration: none;
@@ -78,6 +99,9 @@
     max-height: none;
     overflow: auto;
   }
+  .menu-main--collapsed li {
+    visibility: visible;
+  }
   .menu-main-toggle {
     display: none;
   }
diff --git a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
index 43493e02e1..72c94658f6 100644
--- a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
+++ b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.es6.js
@@ -9,10 +9,25 @@
   );
   const menu = document.querySelector('[data-drupal-selector="menu-main"]');
 
+  menu.classList.add('menu-main--collapsed');
+  toggler.setAttribute('aria-expanded', 'false');
+  toggler.setAttribute('aria-controls', menu.getAttribute('id'));
+
   function toggleMenu() {
-    toggler.classList.toggle('menu-main-toggle--active');
-    menu.classList.toggle('menu-main--active');
-    return false;
+    const expanded = toggler.getAttribute('aria-expanded');
+
+    // We want to avoid showing a collapse on page load, so don't enable the CSS
+    // transitions until the button is actually pressed for the first time. This
+    // class should remain in place during subsequent presses.
+    menu.classList.add('menu-main--transition');
+
+    if (expanded === 'false') {
+      toggler.setAttribute('aria-expanded', 'true');
+      menu.classList.remove('menu-main--collapsed');
+    } else {
+      toggler.setAttribute('aria-expanded', 'false');
+      menu.classList.add('menu-main--collapsed');
+    }
   }
 
   toggler.addEventListener('click', toggleMenu);
diff --git a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
index 0705b50f55..a391937a27 100644
--- a/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
+++ b/core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js
@@ -9,10 +9,22 @@
   var toggler = document.querySelector('[data-drupal-selector="menu-main-toggle"]');
   var menu = document.querySelector('[data-drupal-selector="menu-main"]');
 
+  menu.classList.add('menu-main--collapsed');
+  toggler.setAttribute('aria-expanded', 'false');
+  toggler.setAttribute('aria-controls', menu.getAttribute('id'));
+
   function toggleMenu() {
-    toggler.classList.toggle('menu-main-toggle--active');
-    menu.classList.toggle('menu-main--active');
-    return false;
+    var expanded = toggler.getAttribute('aria-expanded');
+
+    menu.classList.add('menu-main--transition');
+
+    if (expanded === 'false') {
+      toggler.setAttribute('aria-expanded', 'true');
+      menu.classList.remove('menu-main--collapsed');
+    } else {
+      toggler.setAttribute('aria-expanded', 'false');
+      menu.classList.add('menu-main--collapsed');
+    }
   }
 
   toggler.addEventListener('click', toggleMenu);
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
index 51174d43c9..18d56cf0ef 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig
@@ -40,8 +40,8 @@
   ]
 %}
 
-<div class="menu-main-togglewrap">
-  <button type="button" name="menu_toggle" class="menu-main-toggle" data-drupal-selector="menu-main-toggle" aria-label="Toggle the menu">{% include active_theme_path() ~ '/images/svg/menu-icon.svg' %}</button>
+<div id="menu-main-toggle" class="menu-main-togglewrap">
+  <button type="button" class="menu-main-toggle" data-drupal-selector="menu-main-toggle" aria-label="Main menu">{% include active_theme_path() ~ '/images/svg/menu-icon.svg' %}</button>
 </div>
 
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
diff --git a/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig b/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
index 0c12b120e6..0fc9738d13 100644
--- a/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/components/navigation/menu--main.html.twig
@@ -46,7 +46,7 @@
   %}
   {% if items %}
     {% if menu_level == 0 %}
-      <ul{{ attributes.addClass(menu_classes).setAttribute('data-drupal-selector','menu-main') }}> {# 1. #}
+      <ul{{ attributes.addClass(menu_classes).setAttribute('data-drupal-selector','menu-main').setAttribute('id', 'menu-' ~ menu_name|clean_class) }}> {# 1. #}
     {% else %}
       <ul{{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}> {# 1. #}
     {% endif %}