Sidebar
Fixed navigation rail; its width remains unchanged when the panel opens.
Page pattern
Contextual Right Panel
Review contextual information or complete a focused edit alongside the parent page. Use full pages for detailed workflows.
Usage scenarios · Right panel
Use a right panel when users need quick information or a focused edit while referring to the parent page. The panel pushes the content to the left; the parent page remains visible, readable and unblurred.
| Role / scenario | Trigger and content | Interaction and purpose |
|---|---|---|
| Mentor · Review an applicant | In the Interview workspace, click an applicant’s name to open candidate information, documents and interview arrangements. | Review information alongside the applicant table. Keep the panel open and click another name to update its content. The table remains available for scrolling, sorting and selection. |
| Mentor · Review interview history | Select View all history in the applicant panel. | Replace the content of the same panel with the applicant’s history. Back to applicant restores the summary. Do not open a second panel. |
| Mentor · Set up or edit an interview | Select Set up interview, Edit interview setup or the rescheduling action in the panel. | Open a dedicated task page for dates, duration and available slots. The panel provides context; the full page provides space to complete the workflow. Batch setup from the table uses the same task-page pattern. |
| Mentor · Write an interview outcome | Select Add Notes and Outcome in the applicant panel. | Open the full interview outcome page to record notes, review the summary and submit a recommendation. |
| Mentor · Return to talent pool | Select Return to talent pool in the panel or the table’s batch toolbar. | Open a confirmation dialog that identifies the affected applicants and explains the effect. Cancel keeps the current context. Confirm applies the change; no separate task page is needed. |
| Programme creation · Edit eligibility criteria | Select Edit Criteria in the wireframe below. | Complete a focused edit while referring to programme details. Done applies the changes and closes the panel. Confirm before discarding unsaved edits. |
Why the right panel fits the Mentor workspace
- Quick review: Candidate information and interview arrangements stay beside the table.
- Easy switching: Mentors can move between applicants without repeatedly leaving and returning to the workspace.
- Consistent interaction: In this workspace, click a name for contextual review; select a task action to open a full workflow.
- Clear scope: The panel’s actions apply to the displayed applicant. Batch actions apply to the checked applicants in the table.
Choose the right surface
Right panel: quick review or a focused edit that benefits from the parent context. Full page: detailed, multi-step work such as interview setup and outcome submission. Confirmation dialog: confirm a specific action such as returning applicants to the talent pool.
Rules depend on the task: The Mentor review panel keeps the table interactive. In the eligibility-editing example below, the parent Next action is disabled until the edit is completed. This is an editing rule, not a rule for every right panel.
Keep parent content visible and push it to the left dynamically so users can cross-check information while using a right panel.
Right panelUse for cross-checking or a quick supplement of information.
Full detail pageClicking an object title opens its full detail page. Use the full page for the complete object context.
Read the original customer feedback
we think that behaviour of right panels should be that the content behind is still visible (ie, not blurred), and content behind gets pushed to the left dynamically
the point of having right panel is for cases where we need to cross check with the content behind the panel, or a quick supplement of info. if the content behind is blurred out then no point to squeeze all the info in a small right panel.
and since we have the consistent interaction of clicking all titles to bring user to a detail page which is a full page, can y’all help to review the entire system and define the pattern for right panel vs full detail page
Focused editing example · Eligibility criteria
Sidebar48–64px · Fixed width
Main contentFlexible · min-width ≈ 600px
Context panel420–480px · Independent scroll
Desktop target dimensions. This embedded preview uses a 60px rail and a 300–440px panel to fit the guide. Below 700px of preview width, After shows the panel full-width beside the rail.
After · Push / reflow layout
After · Panel closed. Click Edit Criteria to try the push / reflow pattern.
2Main content · Parent reference
Create Programme
1 · Programme setup2 · Intakes & Projects
Programme Details
Application Form
Eligibility Criteria
No criteria configured
Programme reference
Main content
Parent page remains visible and scrollable in After, enabling cross-reference.
Panel trigger · Interactive area
Edit Criteria starts a focused task without navigating away from Create Programme.
Panel header
Task title and close action stay visible. Closing with unsaved changes asks for confirmation.
Panel body
Requirements and conditions scroll independently from the parent page.
Main footer
Cancel, Save as Draft and Next stay right-aligned. Next is disabled while the panel is open.
Panel footer
Done owns the active primary action. It applies changes and restores the parent workflow.