How To Detach Component Webflow
- George Apostolov
How To Detach Component Webflow: step-by-step guide
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.
Quick answer: To detach a component in Webflow, select the component instance via the Navigator or direct click. Right-click or press Shift + Ctrl + A, then choose Unlink Instance from the menu. The instance will convert to a normal element, allowing you to modify it individually.
About this Webflow tutorial
Unlink component instances in Webflow to edit them as normal elements. Select the instance, right-click, and choose Unlink Instance. This guide shows how to detach Component Webflow in 5 steps, starting with "Use the Navigator menu to select or directly click on the component instance you wish t..." and finishing with "Your instance is now detached / unlinked from the component and can be modified individ...". The interactive demo above is a click-through copy of the real Webflow interface, so you can rehearse each step before doing it in your own account.
Frequently asked questions
How many steps does it take to detach Component Webflow?
5 steps. Each one is listed in order above, and the demo highlights exactly where to click.
Can I try it without changing my own account?
Yes. Clicking through the demo doesn't touch your Webflow data or settings. Once you know the flow, repeat it in your own workspace.
This tutorial is filed under Webflow. Related guides: How To Duplicate A Component In Webflow, How To Duplicate A Page In Webflow and How To Edit Code In Webflow. Last reviewed 05 Oct 2026.
Create your first interactive demo in minutes
No credit card required • Start building today
