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

1 mode.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
2 const collection = await webflow.getDefaultVariableCollection()
3 
4 // Get Variable Mode
5 const variableMode = await collection?.getVariableModeByName(modeName)
6 
7 try {
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 }

Try this example

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 Ability	Locale	Branch	Workflow	Sitemode
canModifyVariables	Any	Main	Canvas	Design

1	// Get Collection
2	const collection = await webflow.getDefaultVariableCollection()
3
4	// Get Variable Mode
5	const variableMode = await collection?.getVariableModeByName(modeName)
6
7	try {
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	}