Page header

Implemented Blocks

Breadcrumbs, title, description, local or URL tabs and action slots.

Kumo reference: kumo-ui.com/blocks/page-header/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Title

Page title

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 title="Page title" crumbs=header_product_crumbs %}

{% endwdj_component %}

Description

Page title

Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites.

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 title="Page title" description="Action-led, value-oriented description of what this page does. Optional second sentence with use cases or prerequisites." crumbs=header_product_crumbs %}

{% endwdj_component %}

Breadcrumbs

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 crumbs=header_basic_crumbs %}

{% endwdj_component %}

Breadcrumb icons

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 crumbs=header_icon_crumbs %}

{% endwdj_component %}

Tabs

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 crumbs=header_icon_crumbs tabs=header_settings_tabs tab_mode="local" default_tab="general" tabs_label="Settings sections" %}

{% endwdj_component %}

Actions

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 crumbs=header_project_crumbs tabs=header_local_tabs tab_mode="local" default_tab="overview" %}
<button type="button" x-data @click="wdj.toast({title:'Deployment started',variant:'info'})" class="h-9 rounded-lg bg-kumo-brand px-3 text-base text-white">Deploy</button>
{% endwdj_component %}

Compact spacing

Project overview

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 title="Project overview" crumbs=crumbs spacing="compact" %}

{% endwdj_component %}

Complete header

Page title

Action-led, value-oriented description of what this page does.

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 title="Page title" description="Action-led, value-oriented description of what this page does." crumbs=header_product_crumbs tabs=header_local_tabs tab_mode="local" default_tab="overview" %}
<button type="button" x-data @click="wdj.toast({title:'Export ready', description:'Demo export completed.'})" class="h-6.5 rounded-md px-2 text-base ring-1 ring-kumo-line">Export</button>
<button type="button" x-data @click="wdj.toast({title:'New item created',variant:'success'})" class="inline-flex h-6.5 items-center gap-1 rounded-md bg-kumo-brand px-2 text-base text-white">{% wdj_icon "plus" class="size-4" %}New item</button>
{% endwdj_component %}

Hero navigation

Edit code Visit

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 crumbs=header_worker_crumbs tabs=header_hero_tabs tab_mode="local" default_tab="overview" tabs_label="Worker sections" %}
  {% include "wdj/components/button.html" with label="Edit code" icon="code" href="/components/code/" class="h-8!" only %}
  {% include "wdj/components/button.html" with label="Visit" icon="globe" variant="primary" href="/resources/" class="h-8!" only %}
{% endwdj_component %}

Actions without tabs

Project settings

Actions also work on pages without tabs.

Interaction guide

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 title="Project settings" description="Actions also work on pages without tabs." crumbs=crumbs %}
  {% include "wdj/components/button.html" with label="Interaction guide" href="/guide/" only %}
{% endwdj_component %}

Long navigation

Resource overview

Resource dashboard

Show template

{% load wdj %}
{% wdj_component "wdj/components/page_header.html" heading_level=2 title="Resource overview" tabs=long_tabs %}
  {% include "wdj/components/button.html" with label="Resource dashboard" href="/resources/" variant="primary" only %}
{% endwdj_component %}

Local selection and relaxed spacing

Project sections

Current section: analytics

Show template

{% load wdj %}
<div class="w-full" x-data="{ section: 'analytics' }" @wdj:tab-change="section = $event.detail.value">
  {% include "wdj/components/page_header.html" with heading_level=2 title="Project sections" tabs=header_local_tabs tab_mode="local" default_tab="analytics" tabs_label="Project sections" spacing="relaxed" only %}
  <p role="status" class="mt-4 text-base text-kumo-subtle">Current section: <span x-text="section">analytics</span></p>
</div>

API Reference

Prop	Type	Default	Description
title	string	unset	Title; pass the documented value shown in the examples.
description	string	unset	Description; pass the documented value shown in the examples.
crumbs	list[dict]	unset	Breadcrumbs: label, optional href/icon/loading/copy/loading_label/copy_label. The final item is the current page. Phones retain the parent and current page with an ellipsis.
breadcrumbs	string	unset	Breadcrumbs; pass the documented value shown in the examples.
tabs	list[dict]	unset	Tabs; pass the documented value shown in the examples.
tab_mode	string	unset	Tab mode; pass the documented value shown in the examples.
default_tab	string	unset	Default tab; pass the documented value shown in the examples.
tabs_label	string	unset	Tabs label; pass the documented value shown in the examples.
actions	list[dict]	unset	Actions; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
spacing	string	unset	Spacing; pass the documented value shown in the examples.
heading_level	number	unset	Heading level; pass the documented value shown in the examples.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract