Variables & CollectionsVariable ModesManaging Variable Modes

Set variable mode breakpoint

mode.setBreakpoint(breakpointId)

Set the breakpoint that drives a variable mode. Use this method to promote a manual mode to an automatic mode, move an automatic mode to a different breakpoint, or demote an automatic mode back to a manual mode.

  • Pass a BreakpointId to drive the mode automatically at the matching screen size.
  • Pass null to demote the mode to a manual mode.

Syntax

1mode.setBreakpoint(breakpointId: BreakpointId | null): Promise<null>

Parameters

  • breakpointId: BreakpointId | null - The breakpoint to bind to the mode: "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny". Pass null to demote the mode to a manual mode.

Returns

Promise<null>

A Promise that resolves to null once the breakpoint association is saved.

Example

1// Get Collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Get Variable Mode
5const variableMode = await collection?.getVariableModeByName(modeName)
6
7try {
8  // Promote a manual mode to automatic, or move it to a different breakpoint
9  await variableMode?.setBreakpoint("small")
10
11  // Demote the mode back to a manual mode
12  await variableMode?.setBreakpoint(null)
13} catch (err) {
14  if (err.cause?.tag === "VariableModeInvalid") {
15    // The breakpoint is already used by another mode, not enabled on the site, or invalid
16    console.warn(err.message)
17  } else {
18    throw err
19  }
20}

A setBreakpoint call rejects with a VariableModeInvalid error when:

  • The breakpoint is already in use. Each breakpoint can drive only one automatic mode per collection, including the implicit base mode (Breakpoint "X" is already used by mode "Y").
  • The breakpoint isn’t enabled on the site (Breakpoint "X" is not enabled on this site).
  • The breakpoint ID is invalid ("X" is not a valid BreakpointId).

Catch these errors to recover gracefully and surface the message to the user.

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canModifyVariablesAnyMainCanvasDesign