The Panel and LeftPanelLayout are standard pieces of applications, organizing both content and structure.

If your application uses multiple related screens, you will most likely need LeftPanelLayout.

Included Components

  1. Panel: Customizable content container; can be closed if necessary.
  2. LeftPanelLayout: Element to contain related items under a common title. Uses Panel internally.


Default Panel

Contained content

Related links




Panel serves as a basic container component. If handleClose is specified, it will show a closeable button that, when clicked, calls handleClose.

1import React from "react";
2import { Panel } from "@commure/components-foundation";
4const MyPanel = () => (
5 <Panel
6 className="sample-panel"
7 title="App information"
8 body={<div>contents</div>}
9 handleClose={() => {
10 console.log("panel closed");
11 }}
12 />
14export default MyPanel;


LeftPanelLayout is useful for when your content depends on a set of choices. This could be screens to navigate to or options.

The panel itself can be collapsible. You can specify the default behavior to be opened or closed.

1import React from "react";
2import { LeftPanelLayout } from "@commure/components-foundation";
4const MyLeftPanelLayout = () => (
5 <LeftPanelLayout
6 panelTitle={"Options"}
7 panelBody={[<div>a</div>, <div>b</div>]}
8 collapsible={false}
9 defaultClosed={false}
10 />
13export default MyLeftPanelLayout;

API Reference


Prop NameRequired?TypeDescription
bodyfalseReact.ReactNodeBody of the panel that renders below the title.
classNamefalsestringClassName for container element
handleClosefalse() => voidCallback method to be called when the close icon is clicked. If this prop is not provided, the Panel will not be collapsible.
titlefalseReact.ReactNodeTitle to render at the top of the panel


Prop NameRequired?TypeDescription
collapsiblefalsebooleanWhether the left panel should collapse or not. If set to true, a default open and close button will be rendered
defaultClosedfalsebooleanWhether the left panel should be closed by default. This prop is only recognized if collapsible is set to true.
panelBodyfalseReact.ReactNodeBody of the left panel that renders below the title.
panelTitlefalseReact.ReactNodeTitle to render at the top of the left panel.

Related Reading

Application Layout Guidelines
Commure Application Header