Templates

Navigation

Twig allows you to generate navigation menus dynamically using loops and conditionals. This is a clean and efficient way to keep your navigation flexible and maintainable.

Below are values and examples for different navigation structures in Lensfolio.

List of Values

Variable Type Description
navItems array of objects Main navigation array. Each item should contain title, url, and optionally children.
item object A single navigation entry inside the navItems array.
item.title string The display text of the navigation link.
item.url string The URL the link should point to.
item.children array of objects Optional. An array of child navigation items (same structure as navItems).
child object A single child navigation entry within item.children.
child.title string The display text for a child link.
child.url string The URL for a child link.
current_path string The current URL path, used to highlight the active menu item.

Examples

Navigation without child elements

This is the most straightforward example. Each navigation item is rendered as a simple list element.

<ul>
    {% for item in navItems %}
        <li><a href="{{ item.url }}">{{ item.title }}</a></li>
    {% endfor %}
</ul>

You can add an "active" class to the current navigation item based on the current path. This is useful for styling the active page in the menu.

<ul>
    {% for item in navItems %}
        <li class="{{ current_path starts with item.url ? 'active' : '' }}">
            <a href="{{ item.url }}">{{ item.title }}</a>
        </li>
    {% endfor %}
</ul>

To create a dropdown or nested navigation, you can include child elements under each parent navigation item.

<ul>
    {% for item in navItems %}
        <li>
            <a href="{{ item.url }}">{{ item.title }}</a>

            {% if item.children is defined and item.children %}
                <ul>
                    {% for child in item.children %}
                        <li><a href="{{ child.url }}">{{ child.title }}</a></li>
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
</ul>
Previous
HTML Head
Next
Album