Adding External Links to Wagtail Menus
Wagtail comes with a basic solution for displaying pages in a menu. While simple, it’s effective for simple, content-focused sites like blogs. I find that my biggest frustration with the system is that you can only add internal pages as links within your navigation. I developed a simple solution for this problem and packaged it as wagtailmenupage, a python package available on PyPI.
Goals & Features
- Allow for adding external/custom links to the default menu system within Wagtail.
- Work with the existing system as completely as possible, including sorting.
- Package and publish to PyPI for easy sharing.
Tech Stack
- Python ^3.12
- Wagtail ^6.4
How wagtailmenupage Works
Wagtail only allows pages to be menu items. In order to work with this instead of against it, I decided to create a page model that isn’t really a page. This page model has no front end, no previews, no SEO settings, doesn’t show in search results, and is excluded from sitemaps. As a ‘page’, it’s rubbish. But what it is good for is the custom fields it has: title (label), URL and open in new tab.
All wagtailmenupages are automatically added to the menu for the site. This cannot be disabled. You can then set the title and URL. The code you use to display a standard Wagtail menu will work seamlessly. Your new menu item will exist, using the custom link you set instead of trying to link to the page itself. The only modification you can make to your tempalte is to support the open in new tab feature.
Using wagtailmenupage
Once wagtailmenupage is installed, you can add a new page type called ‘Custom menu link’. This is a fake page, as there’s no page to view.
You can then set the 3 fields: ‘Label’, ‘URL’ and ‘Open in new tab’.
To reorder your menu items, you can use Wagtail’s default method of choosing the ‘Sort menu order’ option on the parent page.
Closing Thoughts
I think Wagtail’s built-in menuing is sufficient for a lot of projects. Admittedly, it is somewhat limited and clunky, but working with it means less code to maintain versus building a fully custom implementation.
If you want to add an external (or any custom) URL to your Wagtail site while using Wagtail’s built-in menuing, wagtailmenupage is an extremely lightweight plug-and-play solution. It’s a very modest, simple little project, but I’m happy with it, a quick-win approach which I believe will benefit others.