A panel is a container that emanates from the right side of the screen. Panels are used to represent hierarchy in an application.


The built-in features of a panel in Moonstone include a pre-formatted header and a layout area below for the main body content.

Behaviours & States


When a Panel is open, the content the Panel contains is visible. When a user selects a UI control that creates a new Panel, the new Panel slides in from the right collapsing the current Panel into a breadcrumb on the leftmost side of the screen. This breadcrumb can be clicked to bring the panel back into view.


By default, a Panel is full screen. Panel width is variable; for example a Panel can cover half of the screen for the
"Always Viewing" pattern.