canonical / canonical/vanilla-framework

[New pattern]: Stacked side panels

Open
#5,542 4 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Apps WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

# Pattern proposal: Stacked side panels

This pattern introduces the ability to open a secondary panel on top of an existing one, allowing users to complete contextual sub-flows without navigating away from the primary task.

## Visual

https://github.com/user-attachments/assets/e6645fae-a7e9-4c0e-8549-f6fd991c44e7

## Context

This pattern is a proposed extension to the existing side panel component. It introduces the concept of a **stacked side panel**, which enables users to launch a secondary panel from within a primary panel to complete a related but distinct action without leaving the original flow.

For example, when creating a repository mirror in Landscape, the user must also select a GPG key. If the key doesn't yet exist, they currently have to navigate away to create it. With stacked side panels, a user could add a new GPG key inline, within a secondary panel, and return to the original flow after completion. This improves task continuity and reduces navigation friction.

This pattern is not intended to replace stepped form flows, but rather to allow lightweight, contextual interactions nested within a primary process.

## State

- **Primary panel open / secondary panel closed**
- **Primary and secondary panels open (stacked)**
- **Secondary panel closed (returns focus to primary)**
- **Dismissed (both panels closed)**

## Progressive enhancement

The interaction model, particularly for mobile and small screens, has been inspired by [Silk’s Sheet with stacking](https://silkhq.co/#example-sheet-with-stacking-h2), which demonstrates a clear and effective way to manage multiple stacked panels in limited space.

Contributor guide

Open the contributing guide

Research direction

Start by reading the existing side panel component and its current responsive behavior, then compare the proposed states with the linked stacking example. Done means the framework supports opening a secondary panel over a primary panel, returning focus to the primary panel when dismissed, and closing both panels as described.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.