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

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

// Get Collection
const collection = await webflow.getDefaultVariableCollection()
// Get Variable Mode
const variableMode = await collection?.getVariableModeByName(modeName)
try {
  // Promote a manual mode to automatic, or move it to a different breakpoint
  await variableMode?.setBreakpoint("small")
  // Demote the mode back to a manual mode
  await variableMode?.setBreakpoint(null)
} catch (err) {
  if (err.cause?.tag === "VariableModeInvalid") {
    // The breakpoint is already used by another mode, not enabled on the site, or invalid
    console.warn(err.message)
  } else {
    throw err
  }
}

Designer Ability