diff --git a/templates/includes/nav.html b/templates/includes/nav.html
index 54beaa41..f5a4de76 100644
--- a/templates/includes/nav.html
+++ b/templates/includes/nav.html
@@ -3,10 +3,10 @@
 <nav role="navigation" class="site-nav">
   <div id="nav-wrapper" class="gru-nav-wrapper">
     {% block nav-pre %}{% endblock %}
-    <div id="nav" class="gru-nav togglable">
+    <div id="nav" class="gru-nav">
       {% block nav-top %}{% endblock %}
-      <button id="nav-button" class="gru-nav-button togglable" aria-label="Menu">
-        <span class="sr-only">Ouvrir le menu</span>
+      <button id="nav-button" class="gru-nav-button" aria-labelledby="nav-button--label">
+        <span class="sr-only" id="nav-button--label">Ouvrir le menu</span>
         <span class="icon-bar icon-bar-1"></span>
         <span class="icon-bar icon-bar-2"></span>
         <span class="icon-bar icon-bar-3"></span>
@@ -21,3 +21,19 @@
     {% block nav-post %}{% endblock %}
   </div> <!-- nav-wrapper -->
 </nav>
+
+{% block nav-button-script %}
+<script>
+(function() {
+  const nav_button = document.getElementById('nav-button');
+  const nav_button_label = document.getElementById('nav-button--label');
+  nav_button.addEventListener('click', function() {
+    if (nav_button.classList.toggle('toggled')) {
+      nav_button_label.textContent = 'Fermer le menu';
+    } else {
+      nav_button_label.textContent = 'Ouvrir le menu';
+    }
+  });
+})();
+</script>
+{% endblock %}