---
sourceDocument: Brazil Sales Customer Relationship Management
sourceDocumentLink: https://www.servicenow.com/docs/r/order-management

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil Sales Customer Relationship Management

ft:clusterId :

    - omgmt

bundleId :

    - omgmt

workflow :

    - Customer and Industry


---

# Stage progress chevron

# Stage progress chevron {#ariaid-title1}

Release version: Brazil  
Updated May 7, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read  
Reference for configuring the Stages Progress Chevron component in ServiceNow Quote Experience layouts, including static and dynamic configuration options, combination rules, and CSS custom property theming in ServiceNow CPQ.

## Purpose {#quote-tm-stage-progress-chevron__overview}

The Stages Progress Chevron component displays a horizontal chevron bar that
visually represents a transaction's progression through its quote lifecycle
stages. The component is placed at the root level of the layout YAML or JSON,
alongside `header` or `tierDef`. It can be defined
statically, dynamically, or as a combination of both methods.

## Static configuration {#quote-tm-stage-progress-chevron__static-configuration}

Use static configuration to define a fixed list of stages for the chevron.
Each stage requires a `value` and a display
`label`.

YAML:

    stageProgress:
      stageList:
        - value: draft
          label: Draft
        - value: stage2
          label: Stage 2
        # add more stages as needed
      currentStage: draft

`stageList`
:   Defines each stage's value and display label in the chevron.

`currentStage`
:   Highlights the active stage in the chevron. If omitted, defaults to
    `txn.stage`, which allows the same layout to be used
    across multiple stages.

## Dynamic configuration {#quote-tm-stage-progress-chevron__dynamic-configuration}

Use dynamic (picklist-based) configuration to populate the chevron from custom
transaction fields. This method supports exclusion rules to hide or disable
specific stages and determination rules to set the current stage value.

YAML:

    stageProgress:
      stageListField: txn.custom.stageList
      currentStageField: txn.custom.stageList

`stageListField`
:   Specifies the custom field that provides the list of available
    stages.

`currentStageField`
:   Specifies the custom field that contains the current stage value.
    Determination rules are useful when multiple stages should display as a
    single chevron step.

## Combination and fallback rules {#quote-tm-stage-progress-chevron__combination-rules}

Static and dynamic configurations can be mixed. The following rules apply
when both are present or when values are omitted.

* A static `stageList` can be combined with a dynamic `currentStageField`.
* If neither `stageList` nor `stageListField` is defined, nothing displays in the chevron.
* If neither `currentStage` nor `currentStageField` is defined, `txn.stage` is used by default.
* If both a static and a dynamic version of the same property are present, the dynamic version takes precedence.

## CSS custom property theming {#quote-tm-stage-progress-chevron__css-theming}

The stage progress chevron supports theming using CSS custom properties. The
following table lists the relevant variables. Inspect the element in your
browser to explore additional custom properties.
{#quote-tm-stage-progress-chevron__css-theming__entry__2}

| Variable | Description |
|-|-|
| `--lgk-ProgressStep-chevron-size` | Overall chevron size. |
| `--lgk-ProgressStep-chevron-width` | Fixed width for each chevron. |
| `--lgk-ProgressStep-chevron-minWidth` | Minimum width per chevron. |
| `--lgk-ProgressStep-chevron-padding` | Padding inside each chevron. |
| `--lgk-ProgressStep-chevron-disabled-opacity` | Opacity for disabled or inactive chevrons. |
| `--lgk-ProgressStep-incomplete-backgroundColor` | Background color for incomplete steps. |
| `--lgk-ProgressStep-incomplete-chevron-color` | Chevron icon color for incomplete steps. |
| `--lgk-ProgressStep-current-backgroundColor` | Background color for the current step. |
| `--lgk-ProgressStep-current-chevron-color` | Chevron icon color for the current step. |
| `--lgk-ProgressStep-chevron-label-fontSize` | Font size for stage labels in the chevron. |
| `--lgk-ProgressStep-chevron-label-fontWeight` | Font weight for stage labels in the chevron. |
[Table 1. CSS custom properties for the stage progress chevron]

**Related concepts**   

* [Quote transaction layouts](https://www.servicenow.com/docs/aqpxQxk6u2bSWbku7FolJQ "Layouts define the quote user interface in ServiceNow Quote Experience, controlling which fields, events, and UI effects are visible and how the quote is organized for users in ServiceNow CPQ.")  
**Related tasks**   

* [Create a quote transaction layout](https://www.servicenow.com/docs/IJchMS3euz8O_VPFkU5kLg "Create a layout in ServiceNow Quote Experience to define the quote interface for a stage in ServiceNow CPQ.")  
**Related reference**   

* [ServiceNow Quote Experience layout UI effects](https://www.servicenow.com/docs/R80cMkEt2KN~5hkIPx72Zw "Reference for UI effect types, parameters, access conditions, and YAML and JSON code examples for configuring button behavior in ServiceNow Quote Experience layouts in ServiceNow CPQ.")