Navigation Menus

Configure navigation menus in Bengal

1 min read 250 words

Configure and customize navigation menus in Bengal.

Overview

Bengal supports multiple menu types that can be configured in frontmatter or configuration files.

Frontmatter Configuration

Add pages to menus directly in frontmatter:

1
2
3
4
5
6
7
8
9
---
title: About Us
menu:
  main:
    weight: 10
  footer:
    weight: 5
    name: About  # Override display name
---

Configuration File Menus

Define menus inbengal.tomlfor non-content pages:

1
2
3
4
5
6
7
8
9
[[menu.main]]
name = "GitHub"
url = "https://github.com/your-org/your-repo"
weight = 100

[[menu.main]]
name = "Documentation"
url = "/docs/"
weight = 10
Property Type Description
name string Display text (defaults to page title)
url string Link destination
weight integer Sort order (lower = first)
pre string HTML before name (icons, etc.)
post string HTML after name
parent string Parent menu item for nesting
identifier string Unique ID for parent references

Nested Menus

Create hierarchical menus withparentandidentifier:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# Parent item
---
title: Products
menu:
  main:
    identifier: products
    weight: 20
---

# Child item
---
title: Bengal Pro
menu:
  main:
    parent: products
    weight: 10
---

Accessing Menus in Templates

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{% for item in site.menus.main %}
  <a href="{{ item.url }}">{{ item.name }}</a>
  {% if item.children %}
    <ul>
    {% for child in item.children %}
      <li><a href="{{ child.url }}">{{ child.name }}</a></li>
    {% endfor %}
    </ul>
  {% endif %}
{% endfor %}