diff --git a/.gitignore b/.gitignore
index 4000091..3839c0d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 resources
 public
 .env
+.idea
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
new file mode 100644
index 0000000..0890f27
--- /dev/null
+++ b/assets/js/app.js
@@ -0,0 +1,29 @@
+/**!
+ Navigation Button Toggle class
+ */
+(function() {
+
+// old browser or not ?
+    if ( !('querySelector' in document && 'addEventListener' in window) ) {
+        return;
+    }
+    window.document.documentElement.className += ' js-enabled';
+
+    function toggleNav() {
+
+// Define targets by their class or id
+        var button = document.querySelector('.nav-button');
+        var target = document.querySelector('.layout > nav');
+
+// click-touch event
+        if ( button ) {
+            button.addEventListener('click',
+                function (e) {
+                    button.classList.toggle('is-active');
+                    target.classList.toggle('is-opened');
+                    e.preventDefault();
+                }, false );
+        }
+    } // end toggleNav()
+    toggleNav();
+}());
diff --git a/assets/styles/footer.sass b/assets/styles/footer.sass
index 2d1ecb2..b439117 100644
--- a/assets/styles/footer.sass
+++ b/assets/styles/footer.sass
@@ -4,7 +4,7 @@
   display: flex
   flex-wrap: wrap
   text-align: center
-  padding: 1.5rem
+  padding: 1rem
   position: absolute
   bottom: 0
   left: 0
diff --git a/assets/styles/menu.sass b/assets/styles/menu.sass
index 28730f6..38be455 100644
--- a/assets/styles/menu.sass
+++ b/assets/styles/menu.sass
@@ -1,13 +1,107 @@
 nav
+  position: absolute
+  top: 10rem
+  left: -15rem
+  ul
+    list-style: none
+    li
+      border-left: 1px solid $color-primary
+      padding-left: 15px
+      &.active
+        font-weight: $active
+      a
+        text-decoration: none
+        color: $color-primary
+        &:hover
+          font-weight: $active
+
+.nav-button
+  display: none
+
+@media screen and (max-width: 80rem)
+  body
+    padding-bottom: 2*$space
+  nav
+    display: none
+    position: fixed
+    z-index: 10
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    background: $color-secondary
+    &.is-opened
+      display: block
     ul
-        list-style: none
-        li
-            border-left: 1px solid $color-primary
-            padding-left: 15px
-            &.active
-                font-weight: $active
-            a
-                text-decoration: none
-                color: $color-primary
-                &:hover
-                    font-weight: $active
\ No newline at end of file
+      list-style: none
+      padding: $space
+      position: absolute
+      bottom: $space
+      right: 0
+      width: 100%
+      li
+        line-height: 1.8*$space
+        font-size: 0.7*$space
+        text-align: right
+        a
+          text-decoration: none
+          color: $color-primary
+          font-weight: 400
+          &:hover
+            font-weight: 700
+        &.active a
+          font-weight: 700
+  .nav-button
+    z-index: 20
+    display: inherit
+    border: 0
+    padding: 0
+    position: fixed
+    bottom: 0.5*$space
+    right: $space
+    background: transparent !important
+    &:before
+      content: 'menu'
+      padding: 0 2em
+      text-transform: uppercase
+      background: $color-secondary
+      position: fixed
+      left: 0
+      width: 100%
+      height: 2*$space
+      bottom: 0
+      padding: 0.5*$space 3*$space 0.5*$space 0
+      line-height: $space
+      text-align: right
+    &.is-active:before
+      content: ''
+    & > *
+      display: inline-flex
+      vertical-align: top
+      flex-direction: column
+      justify-content: space-between
+      align-items: stretch
+      height: 2.6rem
+      width: 3.6rem
+      background-image: linear-gradient(#333,#333)
+      background-position: 50%
+      background-repeat: no-repeat
+      background-origin: content-box
+      background-size: 100% 1px
+      transition: .25s
+      transition-property: transform,background
+      will-change: transform,background
+    & > ::before,& > ::after
+      content: ""
+      height: 1px
+      background: #333
+      transition: .25s
+      transition-property: transform,top
+      will-change: transform,top
+    &.is-active > *
+      background-image: none
+      justify-content: center
+    &.is-active > ::before
+      transform: translateY(50%) rotate(45deg)
+    &.is-active > ::after
+      transform: translateY(-50%) rotate(-45deg)
diff --git a/config/_default/config.yml b/config/_default/config.yml
index 3b71ba5..2d64ac0 100644
--- a/config/_default/config.yml
+++ b/config/_default/config.yml
@@ -15,3 +15,10 @@ params:
   description: Histoire d'un pied est une série de livres témoignant de mon combat face au handicap
   keywords: lowtech, ecoconception, web, server
   # socialImage: accueil/bienvenue.png
+
+menu:
+  main:
+    - identifier: accueil_id
+      name: 🏠 accueil
+      url: /
+      weight: 1
\ No newline at end of file
diff --git a/content/annuaires.md b/content/annuaires.md
index ef230af..4374d21 100644
--- a/content/annuaires.md
+++ b/content/annuaires.md
@@ -1,6 +1,9 @@
 ---
-title: 📔 Annuaires des acteurs
-weight: 2
+title: Annuaires des acteurs
+menu:
+  main:
+    name: 📔 Annuaires
+    weight: 20
 ---
 
 ## Acteurs des low-tech :
diff --git a/content/manifesto.md b/content/manifesto.md
index 4f2222d..360b8bb 100644
--- a/content/manifesto.md
+++ b/content/manifesto.md
@@ -1,6 +1,9 @@
 ---
-title: 🔥 Manifesto
-weight: 1
+title: Manifesto
+menu:
+  main:
+    name: 🔥 Manifesto
+    weight: 10
 ---
 
 # Intro site
diff --git a/content/outils-ressources.md b/content/outils-ressources.md
index dc7c454..e0eca85 100644
--- a/content/outils-ressources.md
+++ b/content/outils-ressources.md
@@ -1,6 +1,9 @@
 ---
-title: 🛠 Outils et ressources
-weight: 3
+title: Outils et ressources
+menu:
+  main:
+    name: 🛠 Outils et ressources
+    weight: 30
 ---
 
 ## Ressources
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a571346..ce504fa 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -3,6 +3,7 @@
 {{ partial "head.html" . }}
   <body>
     <div class="layout">
+      {{ partial "menu.html" . }}
       {{ partial "header.html" . }}
       <main role="main" id="content">
         {{ block "main" . }}{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 1a2c80c..5cd8800 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -4,18 +4,3 @@
 │└┤┼││││░││┴┤─┤│││││││┴┤┼│
 └─┴─┴──┘░└┴─┴─┴┴┘└─┴─┴─┴─┘
 </pre></h1>
-<nav>
-  {{ $title := .Title }}
-  {{ $section := .CurrentSection.Title }}
-  {{ $pages := where site.RegularPages "Type" "in" "page" }}
-  {{ $pages := $pages | intersect (where site.RegularPages "Params.headless" "!=" true) }}
-  {{ $pages := $pages | union (where site.Pages "Kind" "in" "section") }}
-  <ul>
-    <li {{ if (eq .Title "🏡 Accueil") }}class="active"{{ end }}><a href="/">🏡 Accueil</a></li>
-    {{ range $pages.ByWeight }}
-    <li class="{{ if or (eq .Title $title) (eq .Title $section) }}active{{ end }}">
-      <a href="{{ .Permalink }}">{{ .Title }}</a>
-    </li>
-    {{ end }}
-  </ul>
-</nav>
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
new file mode 100644
index 0000000..4a5fc44
--- /dev/null
+++ b/layouts/partials/js.html
@@ -0,0 +1,2 @@
+{{ $script := resources.Get "js/app.js" }}
+<script src="{{ $script.Permalink }}"></script>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
new file mode 100644
index 0000000..42fef96
--- /dev/null
+++ b/layouts/partials/menu.html
@@ -0,0 +1,12 @@
+<!-- navigation -->
+<nav>
+    <ul>
+        {{ $currentPage := . }}
+        {{ range .Site.Menus.main }}
+        <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }} {{ .Pre }}">
+        <a href="{{ .URL }}" >{{ .Name }}</a>
+        </li>
+        {{ end }}
+    </ul>
+</nav>
+<button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>