<a href="/wiki/display/CPDesign/Application+Toolbar">Application Toolbar</a>

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

Overview

Look and Feel

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>HCB</div> <div>HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/application-toolbar-1/media1_1c402dde113bd24023ee35d00a9abf0b97555c2bf.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1c402dde113bd24023ee35d00a9abf0b97555c2bf.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1c402dde113bd24023ee35d00a9abf0b97555c2bf.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/components/components/application-toolbar-1/media%5C_1c402dde113bd24023ee35d00a9abf0b97555c2bf.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/application-toolbar-1/media_1c402dde113bd24023ee35d00a9abf0b97555c2bf.png?width=750&format=png&optimize=medium</a>" width="2388" height="1668"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/application-toolbar-1/media1_1f36e22d4a762406c3fa034b8c932062f949d36a1.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f36e22d4a762406c3fa034b8c932062f949d36a1.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f36e22d4a762406c3fa034b8c932062f949d36a1.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/components/components/application-toolbar-1/media%5C_1f36e22d4a762406c3fa034b8c932062f949d36a1.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/application-toolbar-1/media_1f36e22d4a762406c3fa034b8c932062f949d36a1.png?width=750&format=png&optimize=medium</a>" width="2388" height="1668"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/application-toolbar-1/media1_1e114af171fc32e1e973304a28720844cfd8ecf4b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1e114af171fc32e1e973304a28720844cfd8ecf4b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1e114af171fc32e1e973304a28720844cfd8ecf4b.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/components/components/application-toolbar-1/media%5C_1e114af171fc32e1e973304a28720844cfd8ecf4b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/application-toolbar-1/media_1e114af171fc32e1e973304a28720844cfd8ecf4b.png?width=750&format=png&optimize=medium</a>" width="2388" height="1668"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/application-toolbar-1/media1_1d0d9bdcff477bfae38dbb8a4e0f75535619c0d1a.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1d0d9bdcff477bfae38dbb8a4e0f75535619c0d1a.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1d0d9bdcff477bfae38dbb8a4e0f75535619c0d1a.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/components/components/application-toolbar-1/media%5C_1d0d9bdcff477bfae38dbb8a4e0f75535619c0d1a.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/application-toolbar-1/media_1d0d9bdcff477bfae38dbb8a4e0f75535619c0d1a.png?width=750&format=png&optimize=medium</a>" width="2388" height="1668"> </picture> </div> </div></p>

Anatomy

Desktop Specification

<div> <div></div> <div></div> <div></div> </div> <div> <div><strong><br></strong></div> <div><strong>Container</strong></div> <div>padding: 0.5rem 0.75rem<br>spacing between sections: 0.375rem<br>background: var(--sapObjectHeader_Background);<br>box-shadow: var(--sapContainer_HeaderShadow);</div> </div> <div> <div><strong>A</strong></div> <div><strong>Main Menu - Collapsed</strong></div> <div><strong>See the "Main Menu - Collapsed" section</strong></div> </div> <div> <div><strong>B</strong></div> <div><strong>Main Menu - Expanded</strong></div> <div><strong>See the "Main Menu - Expanded" section</strong></div> </div> <div> <div><strong>C</strong></div> <div><strong>Filters</strong></div> <div><strong>See the "<a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Fbtp%2Fcomponents%2Fcomponents%2Fapplication-toolbar-1%2Fstyle%23ApplicationToolbar-Filters">Filters</a>" section</strong></div> </div>

When the Application Toolbar is collapsed, the middle section of the Title Bar accommodates the Main menu. It is comprised of multiple instances of overstyled MenuButton (Horizon).

<div> <div></div> <div></div> <div>Description</div> </div> <div> <div><strong>A1</strong></div> <div><strong>Toolbar</strong></div> <div> <p>Horizontally and vertically centered <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915944">Toolbar (Horizon)</a></p> <p>The gap between menu items: 0.25rem;</p> </div> </div> <div> <div><strong>A2</strong></div> <div><strong>Menu items</strong></div> <div> <p>Inherits the interaction from <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912684">MenuButton (Horizon)</a>, but have deviations that are described below:</p> <p>For detailed Visual Specification, follow <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButton%2B-%2BApplication">Button - Application</a></p> </div> </div> <div> <div><strong>A3</strong></div> <div><strong>Sub-menus</strong></div> <div>For detailed Visual Specification, follow <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus">Navigation Menus</a></div> </div>

When the Application Toolbar is expanded, the Main Menu is displayed on a separate row in groups.

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>B1</strong></div> <div><strong>Group</strong></div> <div>padding: 0.375rem 0.5rem;<br>border-radius: 0.25rem;<br>gap: 0.25rem;<br>margin-left: 0.25rem;<br>margin-right: 0.25rem;</div> </div> <div> <div><strong>B2</strong></div> <div><strong>Group Title</strong></div> <div>font-size: var(--sapFontSize);<br>color: var(--sapContent_LabelColor);</div> </div> <div> <div><strong>B3</strong></div> <div><strong>Actions</strong></div> <div> <p>Actions are placed inside a <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698915944">Toolbar (Horizon)</a>. It handles the overflow of items.</p> <p>gap: 0.25rem</p> <p>For detailed Visual Specification, follow <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButton%2B-%2BApplication">Button - Application</a></p> </div> </div>

Filters

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>C1</strong></div> <div><strong>Data Token</strong></div> <div>For detailed specifications, follow <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FData%2BToken">Data Token</a>.<br>margin-left: 0.25rem;<br>margin-right: 0.25rem;</div> </div> <div> <div><strong>C2</strong></div> <div><strong>Spacer</strong></div> <div>This is an invisible element that takes all available spaces and places navigation items at opposite ends. The size of the spacer is calculated dynamically.</div> </div> <div> <div><strong>C3</strong></div> <div><strong>Action Button</strong></div> <div> <p>For detailed Visual Specification, follow <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButton%2B-%2BApplication">Button - Application</a></p> <p>vertically centered<br>margin-right: 0.25rem;</p> </div> </div>

Tablet Specification

There is no overflow, the row scrolls horizontally.

Phone Specification

<p><div> <div>Phone - Collapsed Toolbar</div> <div>Phone - Expanded Toolbar</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/application-toolbar-1/media1_1f3fe081799edf41c908739ec64ad2f6be919420c.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f3fe081799edf41c908739ec64ad2f6be919420c.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f3fe081799edf41c908739ec64ad2f6be919420c.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/components/components/application-toolbar-1/media%5C_1f3fe081799edf41c908739ec64ad2f6be919420c.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/application-toolbar-1/media_1f3fe081799edf41c908739ec64ad2f6be919420c.png?width=750&format=png&optimize=medium</a>" width="900" height="1904"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/components/application-toolbar-1/media1_164299aa0863412fed2aa06ff93232d6fe9721816.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_164299aa0863412fed2aa06ff93232d6fe9721816.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_164299aa0863412fed2aa06ff93232d6fe9721816.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/components/components/application-toolbar-1/media%5C_164299aa0863412fed2aa06ff93232d6fe9721816.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/components/application-toolbar-1/media_164299aa0863412fed2aa06ff93232d6fe9721816.png?width=750&format=png&optimize=medium</a>" width="900" height="1904"> </picture> </div> </div></p>