What's on this page

• Declare entries in configuration
• Add a page from its front matter
• Override or disable an entry
• Render the menu

Build a navigation menu

Cecil manages navigation menus as collections of entries (name, URL, weight) that you can declare in the configuration or directly in pages, then render anywhere in your templates.

Declare entries in configuration

Add a menus section in cecil.yml. Each menu (e.g.: main, footer) is a list of entries with a unique id:

menus:
  main:
    - id: about
      name: "About"
      url: /about/
      weight: 1
  footer:
    - id: github
      name: "GitHub"
      url: https://github.com/Cecilapp/Cecil
      weight: 99

Add a page from its front matter

A page can add itself to one or more menus with the menu variable. The entry name is the page title and the URL is the page path:

---
title: Our Expertise
menu:
  main:
    weight: 15
  footer:
    weight: 15
    name: "Expertise" # override the entry name in this menu
---

Override or disable an entry

Use the page ID as id to override an existing entry, or enabled: false to remove it:

menus:
  main:
    - id: index
      name: "Home"
      weight: 1
    - id: about
      enabled: false

Render the menu

Loop over site.menus.<menu>, sorted by weight, and compare each entry ID with the current page ID to highlight the active item:

<nav>
  <ul>
  {% for entry in site.menus.main|sort_by_weight %}
    <li>
      <a href="{{ url(entry.url) }}"{% if entry.id == page.id %} aria-current="page" class="active"{% endif %}>{{ entry.name }}</a>
    </li>
  {% endfor %}
  </ul>
</nav>

A single entry can also be reached by its ID:

{% if site.menus.main.about is defined %}
  <a href="{{ url(site.menus.main.about.url) }}">{{ site.menus.main.about.name }}</a>
{% endif %}