How To Detach Component Webflow

Updated on:

April 6, 2026

By:

Madhav Bhandari

Use this interactive demo to learn how to detach components in Webflow.

‍

Here is how to detach or unlink a component (or an instance of one) in Webflow:

‍

Use the Navigator menu to select or directly click on the component instance you wish to detach or unlink.
Right click on the component instance to open a menu or use the shortcut of Shift + Ctrl + A.
Select Unlink Instance from the bottom.
You will notice the name and menu options change to a normal element.
Your instance is now detached / unlinked from the component and can be modified individually.

📌 Why this matters

Detaching components lets you break free from global constraints when you need a one-off variation that shouldn't affect other instances. You might need different styling, content, or behavior for a specific page context. Beyond simple customization, detaching becomes powerful when you're iterating on design systems.

You can experiment with modifications to see how they work before deciding whether to update the master component globally or keep the variation isolated. This flexibility prevents you from either compromising your design system or being locked into rigid templates.

Your product deserves an interactive demo

Start free

How To Add Slider In Webflow

How To Animate In Webflow

How To Create A Blog In Webflow