The Salesforce Developers website will undergo maintenance on May 29, 2024 from 3:00 a.m. UTC to 10:00 a.m. UTC. The maintenance process may affect the availability of our documentation. Please plan accordingly.

Configure a Component for the Utility Bar

To use a Lightning web component as a utility item in an app’s utility bar, define the component’s metadata.

The componentName.js-meta.xml file defines the metadata values for the component. To make your component usable as a utility item in the utility bar, set isExposed to true, and define a lightning__UtilityBar target. To expose editable properties in the App Manager, define the properties in targetConfigs.

See the complete list of XML Configuration File Elements.

To work with utility bars programmatically, use the Lightning Console JavaScript API.

To include an SVG resource as a custom icon for your utility item in the App Manager, add it to your component’s folder. It must be named componentName.svg. You can only have one SVG per folder.

See Also