Components / Shells
App shell
Application workspace with responsive desktop navigation, topbar and optional two-tier regions.
Full-page preview
The preview is a registered, same-origin template for this shell. It does not run visitor supplied source.
Use it
Read the pinned package source
{% extends "brickwork/shell/app.html" %}
{% load brickwork_nav %}
{% block sidebar %}{% bw_nav items=nav_items active=nav_active %}{% endblock %}
{% block mobile_nav %}{% bw_nav items=nav_items active=nav_active %}{% endblock %}
{% block content %}<p>Workspace content.</p>{% endblock %}Public blocks
| Block | Use |
|---|---|
rail / rail_region | Capability rail for layout='regions'. |
sidebar / sidebar_mobile / mobile_nav | Use the same reachable tree in both. |
sidebar_switcher / mobile_nav_switcher | Consumer-owned workspace switcher above navigation. |
topbar / topbar_search / topbar_notifications / topbar_account_menu | Topbar composition seams. |
subnav / breadcrumbs | Optional navigation regions. |
page_header / page_actions / content / footer | Page-local workspace seams. |
Accessibility and no-JavaScript behaviour
The mobile drawer is native details. The sidebar collapse control is an optional enhancement, and its expanded state remains fully usable.
Desktop and mobile navigation are server-rendered. Do not make a destination available only in a JavaScript flyout.
Troubleshooting
- The regions layout has an empty gap.
- Fill rail and sidebar only when needed. Empty region tracks collapse by contract.