Adam Mateusz Brożyński1. We need to have custom page_header_buttons tag to get all the action buttons in different form than as dropdown and not to mess up with the rest of templates:
In /app/templatetags/custom_tags.py:
from django import template
from wagtail import hooks
from wagtail.admin.templatetags.wagtailadmin_tags import page_header_buttons
register = template.Library()
@register.inclusion_tag(
"wagtailadmin/pages/listing/custom_page_header_buttons.html", takes_context=True
)
def custom_page_header_buttons(context, page, page_perms):
return page_header_buttons(context, page, page_perms)
2. Now let's make custom buttons template in app/wagtailadmin/pages/listing/custom_page_header_buttons.html (we can use core.css actionbutton class to style buttons):
{% load wagtailadmin_tags i18n %}
<nav aria-label="{{ title }}">
{% block content %}
{% for button in buttons %}
<div class="actionbutton mx-2 inline-block">
<a href="{{ button.url }}" aria-label="{{ button.attrs.title }}" class="button bicolor button--icon">
{% if button.icon_name %}
<span class="icon-wrapper">
{% icon name=button.icon_name %}
</span>
{% endif %}
{{ button.label }}
</a>
</div>
{% endfor %}
{% endblock %}
</nav>
3. Let's make breadcrumbs always extended by creating app/templates/wagtailadmin/shared/breadcrumbs.html and removing button, is_expanded conditions and hidden classes:
{% load i18n wagtailadmin_tags %}
{% comment "text/markdown" %}
The breadcrumb component is reused across all of Wagtail’s headers when the page tree context is needed.
Variables this template accepts:
`pages` - A list of wagtail page objects
`trailing_breadcrumb_title` (string?) - use this for a non linkable last breadcrumb
`classname` - Modifier classes
{% endcomment %}
{% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-text-label w-pr-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-text-label w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold' icon_classes='w-w-4 w-h-4 w-ml-3' %}
{# Breadcrumbs are visible on mobile by default but hidden on desktop #}
<div class="w-breadcrumb w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin {{ classname }} w-pl-3" data-breadcrumb-next{% if not pages %} hidden{% endif %}>
<div class="w-relative w-h-slim-header w-mr-4 w-top-0 w-z-20 w-flex w-items-center w-flex-row w-flex-1 sm:w-flex-none w-transition w-duration-300">
<nav class="w-flex w-items-center w-flex-row w-h-full"
aria-label="{% trans 'Breadcrumb' %}">
<ol class="w-flex w-flex-row w-justify-start w-items-center w-h-full w-pl-0 w-my-0 w-gap-2 sm:w-gap-0 sm:w-space-x-2">
{% for page in pages %}
{% if page.is_root and url_root_name %}
{% url url_root_name as breadcrumb_url %}
{% else %}
{% url url_name page.id as breadcrumb_url %}
{% endif %}
{% if page.is_root %}
<li
class="{{ breadcrumb_item_classes }}"
data-breadcrumb-item
>
<a
class="{{ breadcrumb_link_classes }}"
href="{{ breadcrumb_url }}{{ querystring_value }}"
>
{% trans "Root" %}
</a>
{% icon name="arrow-right" classname=icon_classes %}
</li>
{% elif forloop.first %}
{# For limited-permission users whose breadcrumb starts further down from the root #}
<li
class="{{ breadcrumb_item_classes }}"
data-breadcrumb-item
>
<a class="{{ breadcrumb_link_classes }}" href="{{ breadcrumb_url }}{{ querystring_value }}">
{% trans "Root" %}
</a>
{% icon name="arrow-right" classname=icon_classes %}
</li>
{% elif forloop.last %}
<li
class="{{ breadcrumb_item_classes }}"
data-breadcrumb-item
>
<a class="{{ breadcrumb_link_classes }}"
href="{{ breadcrumb_url }}{{ querystring_value }}">
{{ page.get_admin_display_title }}
</a>
{% if trailing_breadcrumb_title %}
{% icon name="arrow-right" classname=icon_classes %}
{% endif %}
</li>
{% else %}
<li
class="{{ breadcrumb_item_classes }}"
data-breadcrumb-item
>
<a class="{{ breadcrumb_link_classes }}" href="{{ breadcrumb_url }}{{ querystring_value }}">
{{ page.get_admin_display_title }}
</a>
{% icon name="arrow-right" classname=icon_classes %}
</li>
{% endif %}
{% endfor %}
{% if trailing_breadcrumb_title %}
<li class="{{ breadcrumb_item_classes }}">
<div class="w-flex w-justify-start w-items-center">
{{ trailing_breadcrumb_title }}
</div>
</li>
{% endif %}
</ol>
</nav>
</div>
</div>
{% endwith %}
4. We need to make a new block in slim_header.html because default ones cannot be used to have full width div with content.
We need to copy & paste wagtailadmin/templates/shared/headers/slim_header.html file and add a new block at the end. Do not modify anything else, since it's a general template used for many purposes:
app/templates/wagtailadmin/shared/headers/slim_header.html:
{% load wagtailadmin_tags i18n %}
{% fragment as nav_icon_classes %}w-w-4 w-h-4 group-hover:w-transform group-hover:w-scale-110{% endfragment %}
{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current w-shrink-0{% endfragment %}
{% fragment as nav_icon_counter_classes %}-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-text-text-button w-border w-border-surface-page w-rounded-[1rem]{% endfragment %}
{# Z index 99 to ensure header is always above #}
<style>
// for smaller header bar
.w-slim-header {
height: 50px;
}
// smaller buttons
@media screen { .button {
height: 2rem !important;
line-height: 1.8rem;
}}
</style>
<header class="w-slim-header w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-surface-header w-border-b w-border-border-furniture w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-slim-header">
{# Padding left on mobile to give space for navigation toggle, #}
<div class="w-pl-slim-header sm:w-pl-5 w-min-h-slim-header sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
<div class="w-flex w-flex-1 w-items-center w-overflow-hidden">
{% block header_content %}
{% endblock %}
</div>
</div>
<div class="w-w-full sm:w-w-min w-flex sm:w-flex-nowrap sm:w-flex-row w-items-center w-p-0 sm:w-py-0 sm:w-pr-4 sm:w-justify-end">
{% block actions %}
{% endblock %}
</div>
</header>
{% block after_header %}
{% endblock %}
5. Finally we can create copy & paste wagtailadmin/pages/page_listing_header.html to app/templates/wagtailadmin/pages/page_listing_header.html and make necessary modifications:
{% extends 'wagtailadmin/shared/headers/slim_header.html' %}
{% load wagtailadmin_tags i18n %}
{# CUSTOM TAG! #}
{% load custom_tags %}
{% block header_content %}
{# Accessible page title #}
<h1 class="w-sr-only">
{{ title }}
</h1>
{# breadcrumbs #}
{% breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' is_expanded=parent_page.is_root classname='sm:w-py-3 lg:w-py-7' %}
{# Actions divider #}
<div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-border-furniture"></div>
{# NOTHING MORE HERE! #}
{% endblock %}
{% block actions %}
{% if not parent_page.is_root %}
{% include "wagtailadmin/shared/side_panel_toggles.html" %}
{# Page history #}
{% if parent_page.get_latest_revision %}
<a href="{% url 'wagtailadmin_pages:history' parent_page.id %}"
class="{{ nav_icon_button_classes }}"
data-tippy-content="{% trans 'History' %}"
data-tippy-offset="[0, 0]"
data-tippy-placement="bottom"
aria-label="{% trans 'History' %}"
>
{% icon name="history" classname=nav_icon_classes %}
</a>
{% endif %}
{% include "wagtailadmin/shared/page_status_tag_new.html" with page=parent_page %}
{% endif %}
{% endblock %}
{% block after_header %}
{# OUR DIV WITH TITLE AND BUTTONS! #}
<div class="under-header w-mx-2 w-my-2">
<h1 class="sr-hidden">{{ title }}</h1>
{% custom_page_header_buttons parent_page page_perms=page_perms %}
</div>
{% endblock %}
This still needs a lot of styling but works. I'll publish full source of ready-to-go when I'll finish it. ;)
