Detail drawer

Reveal details from an edge while preserving the current page context.

Live preview Try the effect

Order management

Select an order to view its details

Order number	Customer	Status
	Chen Xiaoyu	Pending
	Li Ming	Completed
	Wang Hai	Completed
	Zhang Chen	Completed

4 demo orders

Open an order to see how the list context is preserved.

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Reveal details from an edge while preserving the current page context. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Order details, profiles and contextual settings.

Related concepts

A drawer enters from an edge; a centered dialog focuses attention on a short decision. State explicitly whether the background remains interactive.

Describe this effect

Output language

Open a detail drawer from the right when an order is selected. Preserve the list and its scroll position. Use a 240ms ease-out transition. On close, restore focus to the triggering order.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.