Main Content Area
This is the main content area. The panel is docked to the left and causes the main content to reflow.
A panel body accepts any layout or component
This is the main content area. The panel is docked to the left and causes the main content to reflow.
A panel is docked to the left/right side of a viewport and is in the document flow of the canvas or main content.
Use this component when:
Toggling visibility of a Panel will re-flow the main content.
The panel should take up 100% of the height of its parent container. In most cases, that would be the viewport or main stage of your application.
When managing the visibility of the panel, there are a few essential accessibility elements to make sure are in place:
aria-hidden
attribute to true
, and when visible, set aria-hidden
to false
.aria-controls
set to the unique ID of the panel and aria-expanded
set to either true
or false
depending on the visibility of the panel.A panel body accepts any layout or component
This is the main content area with a full-height panel.
The header is docked to the top of its panel. When the content of the panel body becomes overflowed, the body will provide scrolling while the header remains visible in place.
Panel header demonstration
Panel with centered header title
This panel includes secondary actions in the header.
Panel with secondary actions menu
Click the button to toggle the left panel. The main content will reflow when the panel opens.
Click the button to toggle the right panel. The main content will reflow when the panel opens.
This panel shows a drilled-in state with a back button.
Panel in drilled-in state (left side)
This panel shows a drilled-in state with a back button.
Panel in drilled-in state (right side)
The panel width can be modified by applying a sizing class to the slds-panel
element.
Width | SLDS Class |
---|---|
240px | slds-size_small |
320px | slds-size_medium |
400px | slds-size_large |
640px | slds-size_x-large |
100% | slds-size_full |