wagtailmenupage: Add custom menu items and external links with Wagtail's native menu system.

• GitHub Repo
• PyPI Package

Installation

Install the package:

# With pip
pip install wagtailmenupage

# Or Poetry
poetry add wagtailmenupage

(Or your prefered package manager)

Run migrations:

# Standard Python
python ./manage.py migrate

# If using Poetry
poetry run python ./manage.py migrate

Add to your INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    "wagtailmenupage",
    ...
]

Usage

Creating a page

You can add a new Page type for menu items:

The 'Page' itself is very stripped down. It supports only 3 fields:

Setting up the template

You can then build a menu using Wagail's built-in system, but these page items will show the correct label and URL:

{% load wagtailcore_tags menupage_tags  %}
{% get_site_root as site_root %}

<nav role="navigation" aria-label="Main navigation">
    <ul>
        {% for menu_item in site_root.get_children.live.in_menu.specific %}
            <li>
                <a
                    href="{% pageurl menu_item %}"
                    {% if request.path == menu_item.url %}aria-current="page"{% endif %}
                    {% if menu_item.open_in_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
                >{{ menu_item.title }}</a>
            </li>
        {% endfor %}
    </ul>
</nav>

The above example doesn't show multi-level menus, but that can be done in the regular Wagtail way.

Take note of the logic for opening in a new tab, which is specifically required for this package's open in new tab functionality to work.

You can then re-order your menu items like normal.

For more guidance on using Wagtail menus, please refer to their documentation

Notes

These pages are excluded from the site search, don't use previews, and are excluded from sitemaps generated by the wagtail-seo package.