Mobile nav toggle

Documentation

All components Marketing Brickwork 4.3.1

Try it

Shell navigation region

Open full-page preview

Correct placement before the primary nav.

Use only inside marketing_nav_region, as a sibling before the shell nav and actions.

Use it

Working invocation

This code creates the configuration shown above. Copy the template and the required Python context together.

{% block marketing_nav_region %}
  {% include "brickwork_marketing/components/_mobile_nav_toggle.html" %}
  <nav class="bw-site-header__nav" aria-label="Primary">…</nav>
{% endblock %}

context = {}

Guide

Add it to your project

Use the public include path "brickwork_marketing/components/_mobile_nav_toggle.html" from the installed django-brickwork package.
Extend the marketing shell.
Override marketing_nav_region and include the toggle before bw-site-header__nav and actions siblings.
Do not fill marketing_header or change sibling order; the CSS general-sibling selector depends on it.

View this component's source for the installed release

Options

Public API

Named blocks

Fill these only when you extend the component template. They are not values passed to an include or tag.

Block	What it replaces
marketing_nav_region	Replaces the mobile navigation toggle region.
marketing_nav	Replaces the marketing navigation content.

Behaviour

Accessibility and responsive behaviour

Accessibility: Native summary has an accessible Menu name; icons are decorative and hidden nav is removed from the accessibility tree while closed.
Responsive: Shown below lg; hidden at lg and above.
Without JavaScript: Fully functional native details disclosure without JavaScript.

Need help?

Troubleshooting

The toggle does nothing.

Use it only inside the marketing shell’s `marketing_nav_region` and pair it with the `marketing_nav` block it controls.

Explore next