---
title: "Hugo : Menu de navigation (simple ou dropdown)"
date: 2019-12-18T11:38:00+01:00
description: "Comment créer un menu de navigation simple, ou plus complexe, de type dropdown pour Hugo"
draft: false
tags: ["Hugo", "Menu", "nav", "dropdown"]
---

## Description

Le but de cet article est de montrer comment créer un menu de navigation pour le {{< abbr SSG "Static Site Generator" >}} qu'est Hugo.

Nous verrons deux manières différentes pour créer :

* un {{< anchor "menu simple" "menu-simple" >}}
* un menu de type {{< anchor dropdown "menu-dropdown" >}}

{{< note info >}}Hugo ne sait pas générer dynamiquement les menus. En conséquence, il faut tout remplir à la main, et bien faire attention à ce qui est rempli !{{< /note >}}

## Documentation

La documentation officielle en anglais :

* {{< gohugo n="configuration" s="getting-started" >}}
* {{< gohugo n="menus" s="variables" >}},
* {{< gohugo n="menus" s="content-management" >}},
* {{< gohugo n="menu-templates" s="templates" >}},
* {{< gohugo n="organization" s="content-management" a="index-pages--indexmd" >}}
* {{< gohugo n="front-matter" s="content-management" >}}

## Configuration

Les différentes entrées du menu sont écrites dans le fichier de configuration `config.toml`. *Pour information, il existe deux autres formats, JSON et YAML*. Nous partirons, du prédicat, d'un site n'ayant qu'une seule langue. Si la conception d'un menu multilangue est subtilement différente, le fonctionnement reste exactement le même.

* Un site {{< anchor monolangue monolangue >}} se configure par le biais de l'entrée : `menu`
* Là, où un site {{< anchor multilangue multilangue >}} se configure par l'entrée : `languages`

Par défaut, Hugo génére un site pour la langue anglaise ; pour le paramètrer dans votre langue native, il faut modifier au moins la variable `defaultContentLanguage`, par exemple pour la langue française : <br>
`defaultContentLanguage = "fr"`, <br> qui peut agrémentée de la variable `languageCode = "fr-FR"`.

Généralement, le fichier {{< abbr HTML "HyperText Markup Language" >}} sera crée dans le répertoire `layouts/partials/`, et quelque soit son nom, *pour l'exemple, nous l'appelerons `nav.html` par soucis de simplicité*, il sera appelé depuis le fichier `layouts/_default/baseof.html`.

`{{ partial "nav.html" . }}`

### Menu simple

C'est typiquement le genre de menu qui renvoie vers des éléments au sein de la page, mais il est possible de renvoyer vers une page nommée.

Pour exemple : http://huc.fr.eu.org

#### Monolangue

{{< file "web-hugo-menu-nav-simple-config.toml" toml "config.toml" >}}

On remarque donc la présence de variables strictement nécessaires :

* `identifier` : un identifiant, strictement nécessaire et unique à chaque entrée
* `name` : le nom
* `url` : le nom de l'ancre, ou de la page, à cibler. La présence du symbole `#` signifie que le lien ciblé est une ancre dans la page ; son absence cible un article précisément nommé.

Ainsi que de certaines utiles :

* `weight` : c'est le poids du lien dans le menu, plus le poids est faible, plus le lien est "important".
* `pre` : permet d'injecter du code avant le texte.
* `post` : permet d'injecter du code après le texte - *n'est pas présentée ici*

Le reste, sachant qu'il existe d'autres variables, je vous renvoie à la documentation officielle.

#### Multilangue

{{< file "web-hugo-menu-nav-simple-multilangue-config.toml" toml "config.toml" >}}

Bien-sûr, allez lire la documentation officielle !

#### Structure

{{< note warning >}}Cette structure de répertoire n'est pas du tout nécessaire si vous ne faites qu'un site monopage, telle juste une page d'accueil, et des liens vers des ancres !{{< /note >}}

Admettons que vous voulez diriger vers des pages, et non pas des ancres… il vous faudra donc créer dans le répertoire `content` les articles correspondants portant les noms servant de valeur à la variable `url`.

Exemple :

{{< code "web-hugo-menu-nav-simple-example-fs" sh >}}

Bien sûr, il est possible de mixer liens vers des pages et des ancres. À vous de modifier en conséquence…

#### HTML

{{< file "web-hugo-menu-nav-simple-html" html "layout/partials/nav.html" >}}

On parcourt tout simplement l'ensemble de la variable `.Site.Menus.main` pour restituer le code correspondant.

Maintenant si dans le fichier de configuration, vous ajoutez et remplissez la variable `pre`, il vous faudra modifier le fichier HTML ainsi, par exemple :

`{{ $icon := printf "<i class=\"%s\"></i>" .Pre }}` <br>
`{{ $text := print $icon " " .Name | safeHTML }}`

Cet exemple nous permet d'injecter du code HTML afin d'ajouter une icône avant le texte, ce qui est utile dans le contexte de la bibliothèque **Font Awesome** ou de toute autre semblable.

### Menu dropdown

{{< note info >}}Hugo n'est pour l'instant capable de gérer qu'un sous-niveau de menu ! {{< /note >}}

Pour obtenir un menu dropdown, tel que vous voyez {{< anchor "en haut de page sur ce site" "page-top" >}}, le plus simple est d'utiliser le framework [Bootstrap](https://getbootstrap.com/).

En tenant compte du fait que vous savez intégrer la bibliothèque {{< abbr JS "JavaScript" >}} et la feuille {{< abbr CSS "Cascade Style Sheet" >}}…

#### Structure

Dans le répertoire `content`, il est nécessaire :

* de créer un ou plusieurs sous-répertoires, qui correspondront aux `sections`
* de créer un ou plusieurs répertoires enfants, dans ces premiers sous-répertoires, qui correspondront aux `sous-sections`

Voici un exemple de structure de répertoires :

{{< code "web-hugo-menu-nav-dropdown-example-fs" sh >}}

On remarque la présence de fichier `_index.md` dans chaque répertoire. Le nom des fichiers `article*.md` n'a pas d'importance.

De même le nom des répertoires importe peu en soit, par contre veillez bien à la correspondance avec la variable `url` dans le fichier de configuration.

#### Fichier `_index.md`

Chaque répertoire a son propre fichier `_index.md` dont le but est simplement d'activer le répertoire qui doit comporter à minima le <span lang="en">Front Matter</span>, au format {{< abbr YAML "YAML Ain't Markup Language" >}}, qui suit :

{{< file "web-hugo-menu-nav-dropdown-index.md" yaml "_index.md" >}}

Si vous voulez qu'il ne soit pas indexé, rajouter la variable `noindex: true`. *(ce qui est évidemment utile dans le contexte de génération de {{< inside2 l="web:hugo:hugo-feed" t="flux de syndication" >}})*.

#### Fichier `config.toml`

La structure du fichier de configuration est sensiblement la même !

{{< file "web-hugo-menu-nav-dropdown-config.toml" toml "config.toml" >}}

On remarque tout particulièrement :

* la présence des variables `parent` qui permettent de définir que l'entrée de menu en question a pour parent celui qui porte l'identifiant nommé. Dans cet exemple, elles ont pour valeur `dev` et renvoie à l'entrée de menu qui a `identifier = "dev"`, *qui est bien aussi leur répertoire parent, dans la {{< anchor "structure de répertoires" structure >}}*.

Si vous avez un site {{< anchor multilangue multilangue >}}, il faudra adapter l'exemple ci-dessus pour le faire correspondre…

#### HTML

{{< file "web-hugo-menu-nav-dropdown" html "layout/partials/nav.html" >}}

## Clap de Fin

"Voilà, c'est fini !"

Nous avons ainsi vu comment créer un menu simple ou un menu dropdown pour Hugo.

N'oubliez pas de vous amuser, puis de publier vos articles, et si besoin de vous faire aider par la [communauté anglaise de Hugo](https://discourse.gohugo.io/).

----

***Enjoy-ID! <br> Enjoy-IT!***

----