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.

Use the SVG resource s a custom icon for your component in the App Manager utility-item picker, where admins browse and select utility items. To add an SVG resource, place a file named componentName.svg in your component’s folder. Each folder supports only one SVG.

The SVG resource doesn’t set the icon that displays in the utility bar at runtime. To set the utility bar icon, open the App Manager, open the utility item’s Properties page, and set the Icon field. The icon picker shows only icons from the SLDS utility icon sprite. Custom SVG resources don’t appear in this picker and don’t replace the utility bar icon.

See Also

• XML Configuration File Elements
• Component SVG Icon
• Salesforce Help: Add a Utility Bar to Lightning Apps
• Salesforce Help: Create and Edit a Custom Lightning Console App