---
schema_version: "1"
id: 0fb6f4fb4b8d0497081e08721667ad84d582a0886f6e7d96bdf75aa50480eafb
title: TPM Promotion Header LWC
collection: legacydeveloper
version: current
locale: en-us
portal_url: https://docs.salesforce.com/legacydeveloper/current/en-us/retail_api/tpm_promotion_header_lwc_setup.md
canonical_url: https://developer.salesforce.com/docs/atlas.en-us.retail_api.meta/retail_api/tpm_promotion_header_lwc_setup.htm
source_site: developer.salesforce.com
content_type: documentation
content_hash: 61997d46ef1cae011ba638d953e0a03ffcf80c052ec840b933995d3f9ec07ef1
description: The tpm-promotion-header-component service component provides access to the TPM promotion header in the LWC layer. This component is part of the TPM managed package.
---
# TPM Promotion Header LWC
The tpm-promotion-header-component service component provides access to the TPM promotion header in the LWC layer. This component is part of the TPM managed package.
This component is a wrapper for accessing the entire promotion header. You can customize a specific section of the header (LWC slot)—without changing the default behavior of the other sections—through a slot-specific promotion header LWC. Customizable promotion header slots are:
- icon: A 32x32 pixel image.
- breadcrumbs: A component to display the page breadcrumbs.
- title: The promotion title
- subtitle: The promotion subtitle
- navigation: A group of button icons.
- left-buttons: The action buttons and components that are anchored to the left of the header toolbar.
- right-buttons: The action buttons and components that are anchored to the right of the header toolbar.
- fullheight-buttons: The buttons that span the complete height of the header.
For information on slot-specific promotion header LWCs, see [TPM Promotion Header Slot LWCs](https://developer.salesforce.com/docs/atlas.en-us.retail_api.meta/retail_api/tpm_promotion_header_slot_lwcs_reference.htm "The slot-specific LWCs related to the promotion header provide access to various promotion header sections in the LWC layer.").
## Example
Here’s an example of a custom promotion header component with the default behavior.
import { LightningElement, api } from 'lwc';
export default class SamplePromotionHeaderCustom extends LightningElement {
@api recordId;
}
59.0trueSAMPLE: Custom Promotion Header Componentlightning\_\_RecordPagecgcloud
Here’s an example of a custom promotion header component with TPM default behavior:
import { LightningElement, api } from 'lwc';
export default class SamplePromotionHeaderCustom extends LightningElement {
@api recordId;
}
59.0trueSAMPLE: Custom Promotion Header Componentlightning\_\_RecordPagecgcloud
Here’s an example of a custom promotion header component with a custom promotion title and custom button.
{myTitle}
import { LightningElement, api } from 'lwc';
export default class SamplePromotionHeaderCustom extends LightningElement {
@api recordId;
myTitle = 'Hello World!';
onButtonClick() {
alert('Hello World!');
}
}
59.0trueSAMPLE: Custom Promotion Header Componentlightning\_\_RecordPagecgcloud
If your org has [Lightning Web Security](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_intro) enabled, the runtimeNamespace property on the metadata file isn’t required.
#### Note
Lightning web security is a feature that must be tested before enabling. [LWC Security](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_when)