<a href="/wiki/display/CPDesign/Side+Panel">Side Panel</a>

Created by Julian, John, last modified by Kirichev, Alexander on Jan 25, 2024

Overview

The Side Panel can use additional components such as the Responsive Splitter (with pagination bar).

See the Side Panel design guidelines and the Responsive Splitter design guidelines for further information on how to use these controls in conjunction with the Side Panel.

Look and Feel

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCW</div> <div>Horizon HCB</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/side-panel/media1_12ae572903ea5d28361e4894e39f6afda79513dc2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_12ae572903ea5d28361e4894e39f6afda79513dc2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_12ae572903ea5d28361e4894e39f6afda79513dc2.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/side-panel/media%5C_12ae572903ea5d28361e4894e39f6afda79513dc2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/side-panel/media_12ae572903ea5d28361e4894e39f6afda79513dc2.png?width=750&format=png&optimize=medium</a>" width="2880" height="2000"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/side-panel/media1_190fc749cd9f861dae449c3263aa9a03fcd3d1e08.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_190fc749cd9f861dae449c3263aa9a03fcd3d1e08.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_190fc749cd9f861dae449c3263aa9a03fcd3d1e08.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/side-panel/media%5C_190fc749cd9f861dae449c3263aa9a03fcd3d1e08.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/side-panel/media_190fc749cd9f861dae449c3263aa9a03fcd3d1e08.png?width=750&format=png&optimize=medium</a>" width="2880" height="2000"> </picture> </div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/side-panel/media1_1fcb6594d0393faee5fb79301cc084b106b9cc5e3.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1fcb6594d0393faee5fb79301cc084b106b9cc5e3.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1fcb6594d0393faee5fb79301cc084b106b9cc5e3.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/side-panel/media%5C_1fcb6594d0393faee5fb79301cc084b106b9cc5e3.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/side-panel/media_1fcb6594d0393faee5fb79301cc084b106b9cc5e3.png?width=750&format=png&optimize=medium</a>" width="2880" height="2000"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/layouts/layouts/side-panel/media1_1670b157c141f2fa2ee88677ec2ba6e9311c2f8bb.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1670b157c141f2fa2ee88677ec2ba6e9311c2f8bb.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1670b157c141f2fa2ee88677ec2ba6e9311c2f8bb.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/layouts/layouts/side-panel/media%5C_1670b157c141f2fa2ee88677ec2ba6e9311c2f8bb.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/layouts/layouts/side-panel/media_1670b157c141f2fa2ee88677ec2ba6e9311c2f8bb.png?width=750&format=png&optimize=medium</a>" width="2880" height="2000"> </picture> </div> </div></p>

Anatomy

<div> <div></div> <div>Component</div> <div>Value</div> </div> <div> <div><strong>A</strong></div> <div>Title Bar / Header (Mandatory)</div> <div>The Title Bar for the Side Panel. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTitle%2BBar">Title Bar</a> for full specifications.</div> </div> <div> <div><strong>B</strong></div> <div>Open Sub Panel (Optional)</div> <div>Opens the Sub Panel to show additional content</div> </div> <div> <div><strong>C</strong></div> <div>Expand / Collapse Side Panel (Mandatory)</div> <div>Expands or Collapses the Side Panel</div> </div> <div> <div><strong>D</strong></div> <div>Close Panel (Mandatory)</div> <div>Closes the Side Panel completely</div> </div> <div> <div><strong>E</strong></div> <div>Content Area (Mandatory)</div> <div>Main Panel Content is displayed here. Level 1 – Content Area can be split by a Responsive Splitter (Horizontal) content from either area can be dragged and dropped into either content area.</div> </div> <div> <div><strong>F</strong></div> <div>Footer – (Optional)</div> <div>Optional actions for the Side Panel can be placed in the footer. Footers are optional and not required.<br>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2697901225">Footer Toolbar</a> for full specifications</div> </div> <div> <div><strong>G</strong></div> <div>Content Area (Mandatory)</div> <div>Main Panel Content is displayed here. Level1 – Content Area can be split by a Responsive Splitter (Horizontal) content from either area can be dragged and dropped into either content area.</div> </div> <div> <div><strong>H</strong></div> <div>Close Sub Panel</div> <div>Closes the Sub Panel</div> </div> <div> <div><strong>I</strong></div> <div>Sub Panel (Optional)</div> <div>Sub Panel content is displayed here. Level 2 – Content Area can be split by a Responsive Splitter (Horizontal) content from either area can be dragged and dropped into either content area.</div> </div>

Interaction States

Desktop Specification

This is the leading design specification for Side Panels.

Side Panel Item

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Side Panel – Collapsed</div> <div> <p>padding: 0.5rem 0.5rem 0.5rem 0.5rem;<br>background: var(–sapTile_Background);<br>border-radius: var(--sapElement_BorderCornerRadius);<br>box-shadow: var(--sapContainer_Shadow2);</p> <p><strong>Normal State</strong><br>background: var(--sapTile_Background)</p> <p><strong>Hover State</strong><br>background: var(--sapTile_Hover_Background)</p> <p><strong>Focused</strong><br>background: var(--sapTile_Background);<br>border: none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</p> </div> </div> <div> <div>B</div> <div>Title</div> <div>font-size: var(--sapFontHeader6Size);<br>font-family: var(--sapFontSemiboldFamily);<br>line-height: 1.25rem;<br>color: var(--sapTitleColor);<br>margin-bottom: 0.5rem;</div> </div> <div> <div>C</div> <div>Subtitle</div> <div>font-size: var(--sapFontSmallSize);<br>font-family: var(--sapFontFamily);<br>color: var(--sapTextColor);<br>margin-bottom: 0.5rem;</div> </div> <div> <div>D</div> <div>Main Content Area</div> <div> <p>padding: 0 rem</p> <p>background: var(–sapGroupContent_Background)</p> </div> </div> <div> <div>E</div> <div>Footer</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2697901225">Footer Toolbar</a> for full specifications</div> </div> <div> <div>F</div> <div>Sub Panel Content Area</div> <div> <p>padding: 0 rem</p> <p>background: var(–sapGroupContent_Background)</p> </div> </div> <div> <div>G</div> <div>Main Content Area</div> <div> <p>padding: 0 rem</p> <p>background: var(–sapGroupContent_Background)</p> </div> </div>

Tablet Specification

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div>A</div> <div>Side Panel – Collapsed</div> <div> <p>padding: 0.5rem 0.5rem 0.5rem 0.5rem<br>background: var(–sapTile_Background);<br>border-radius: var(--sapElement_BorderCornerRadius);<br>box-shadow: var(--sapContainer_Shadow2);</p> <p><strong>Normal State</strong><br>background: var(–sapGroupContent_Background)</p> <p><strong>Hover State</strong><br>background: var(--sapGroupContent_Hover_Background)</p> <p><strong>Focused</strong><br>background: var(–sapGroupContent_Background);<br>border: none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</p> </div> <div></div> </div> <div> <div>B</div> <div>Title</div> <div>font-size: var(--sapFontHeader6Size);<br>font-family: var(--sapFontSemiboldFamily);<br>line-height: 1.25rem;<br>color: var(--sapTitleColor);<br>margin-bottom: 0.5rem;</div> </div> <div> <div>C</div> <div>Subtitle</div> <div>font-size: var(--sapFontSmallSize);<br>font-family: var(--sapFontFamily);<br>color: var(--sapTextColor);<br>margin-bottom: 0.5rem;</div> </div> <div> <div>D</div> <div>Main Content Area</div> <div> <p>padding: 0 rem</p> <p>background: var(–sapGroupContent_Background)</p> </div> </div> <div> <div>E</div> <div>Scroll Bar</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915083">Scroll Bar</a> for full specifications</div> </div> <div> <div>F</div> <div>Footer</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2697901225">Footer Toolbar</a> for full specifications</div> </div> <div> <div>G</div> <div>Main Content Area</div> <div> <p>padding: 0 rem</p> <p>background: var(–sapGroupContent_Background)</p> </div> </div> <div> <div>H</div> <div>Sub Panel Content Area</div> <div> <p>padding: 0 rem</p> <p>background: var(–sapGroupContent_Background)</p> </div> </div>

Phone Specification

Embedded

Native

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div>A</div> <div>Side Panel – Collapsed</div> <div> <p>padding: 0.5rem 0.5rem 0.5rem 0.5rem<br>background: var(–sapTile_Background)<br>border-radius: var(--sapElement_BorderCornerRadius)</p> <p><strong>Normal State</strong><br>background: var(–sapGroupContent_Background)</p> <p><strong>Hover State</strong><br>background: var(--sapGroupContent_Hover_Background)</p> <p><strong>Focused</strong><br>background: var(–sapGroupContent_Background);<br>border: none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</p> </div> </div> <div> <div>B</div> <div>Title</div> <div>font-size: var(--sapFontHeader6Size);<br>font-family: var(--sapFontSemiboldFamily);<br>line-height: 1.25rem;<br>color: var(--sapTitleColor);<br>margin-bottom: 0.5rem;</div> </div> <div> <div>C</div> <div>Subtitle</div> <div>font-size: var(--sapFontSmallSize);<br>font-family: var(--sapFontFamily);<br>color: var(--sapTextColor);<br>margin-bottom: 0.5rem;</div> </div> <div> <div>D</div> <div>Main Content Area</div> <div> <p>padding: 0 rem</p> <p>background: var(–sapGroupContent_Background)</p> </div> </div> <div> <div>E</div> <div>Scroll Bar</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915083">Scroll Bar</a> for full specifications</div> </div> <div> <div>F</div> <div>Footer</div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2697901225">Footer Toolbar</a> for full specifications</div> </div> <div> <div>G</div> <div>Sub Panel Content Area</div> <div> <p>padding: 0 rem</p> <p>background: var(–sapGroupContent_Background)</p> </div> </div>