Skip to content

How to manage the navigation menu

alessandro contini edited this page Oct 4, 2017 · 7 revisions

To achieve a correct mirroring between translations, you will need to correctly manage the navigation menu.

The language picker at the right end of the menu will populate itself according to the existence (or not existence) of translation(s) of the current page (assuming you remembered to populate the ref: tag in the frontmatter of the page correctly!)

Each language will have its own menu file, meaning you can translate menu items accordingly!

Menu files are called navigation.yml and can be found inside the /_data/ folder, and inside the respective language folder, /en/ /it/ etc...

MicroWebsiteTemplate
|
├── _data
       ├── en
       |   └── navigation.yml
       └── it
           └── navigation.yml

The navigation.yml file for the default language will look like this

- title: ABOUT
  url: /about

- title: PAGES
  url: /pages
  sublinks:
    - title: PAGE 1
      url: /page1
    - title: PAGE 2
      url: /page2

- title: NEWS
  url: /blog

- title: OPENCARE.CC
  url: http://opencare.cc

While the navigation.yml file for the translated menu will look, for instance, like the following

- title: ABOUT
  url: /it/about

- title: PAGINE
  url: /it/pages
  sublinks:
    - title: PAGINA 1
      url: /it/pagina1
    - title: PAGINA 2
      url: /it/pagina2

- title: BLOG
  url: /it/blog

- title: OPENCARE.CC
  url: http://opencare.cc

Please note the addition of /it/ to the paths and the different naming of the menu items

How to edit the menu

Any of the following blocks of code will generate a menu item with a name and a URL

- title: ABOUT
  url: /about

Please note that the url: tag will always need a backslash / before the name of the page!

The following block of code featuring the sublinks: tag will instead generate a submenu in a dropdown window

- title: PAGES
  url: /pages
  sublinks:
    - title: PAGE 1
      url: /page1
    - title: PAGE 2
      url: /page2

And of course you can always link to external pages, like in the following block of code

- title: OPENCARE.CC
  url: http://opencare.cc

Last but not least, when defining the url: tags please be sure they are exactly the same as the folder name of the page you are linking to (eg. the /about folder), or the permalink: tag in the frontmatter of the page!!!