Support the page structure
For operational dashboards where staff monitor, triage, and act on live items
Templates
Application shell (operational)
A persistent sidebar, header navigation, and main content area for operational dashboards.
Keep the layout consistent
When the layout needs a persistent sidebar, header navigation, and a main content area
Use it intentionally
For public-facing pages — use the landing or about-us template instead
Operational app shell
Persistent sidebar navigation, top header bar, and a main content region for operational workflows.
When to use
- For operational dashboards where staff monitor, triage, and act on live items
- When the layout needs a persistent sidebar, header navigation, and a main content area
- For internal tools with a shell that stays constant while the content area changes
When not to use
- For public-facing pages — use the landing or about-us template instead
- For simple form submissions — use the form page template instead
Keyboard support
Use the SGDS components inside the application shell (operational) pattern so keyboard behaviour stays predictable.
Check focus order and action placement in the surrounding page context, especially when the pattern groups multiple interactive elements together.
Tab order
- Move focus into the pattern.
- Navigate through interactive elements in visual order.
- Confirm any revealed or supporting content remains reachable.
- Continue to the next interactive element on the page.
TabShift+TabEnterSpaceHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/templates/application-shell-(operational)