Rename elements and component instances

Give elements and component instances custom names to stay organized.

When designing and building in Webflow, elements and component instances are named automatically based on their class, content, asset name, HTML tag, element type, or main component name. But if you reuse the same class or component several times on the same page, it can become difficult to identify specific instances — especially when building larger sites or complex layouts.

You can rename elements and component instances to help you stay organized and identify specific instances, without affecting classes, styling, or interactions.

How to rename an element or component instance

You can rename or reset an element or component instance:

• in the Navigator
• in the right panel
• from the right-click menu
• using the keyboard shortcut

Rename an element or component instance in the Navigator

1. Open the Navigator by clicking the “Navigator” icon in the left toolbar
2. Double-click the element or component instance you’d like to rename
3. Type the new name
4. Press Enter or click away to save your custom name

Rename an element or component instance in the right panel

1. Select the element or component instance (in the Navigator or on the canvas) you’d like to rename
2. Double-click the element or component instance name at the top of the right panel
3. Type the new name
4. Press Enter or click away to save your custom name

Rename an element or component instance from the right-click menu

1. Right-click the element or component instance (in the Navigator or on the canvas) you’d like to rename
2. Click Rename
3. Type the new name
4. Press Enter or click away to save your custom name

Rename an element or component instance using the keyboard shortcut

1. Select the element or component instance you’d like to rename (in the Navigator or on the canvas)
2. Press Option + R (on Mac) or Alt + R (on Windows)
3. Type the new name (note that renaming happens in the Navigator if it’s open, or in the right panel if it’s not)
4. Press Enter or click away to save your custom name

To cancel renaming, press Escape on your keyboard.

Reset a custom name

To remove a custom name and reset it to the default:

• Delete the custom name while renaming and press Enter or click away, or
• Right-click the element in the Navigator or on the canvas and click Reset name (only available when a custom name is set)

View the original name of an element or component instance

If you’ve renamed an element or component instance, you can quickly view its original name in the Navigator by holding Option (on Mac) or Alt (on Windows). For component instances, you can also hover over the custom name at the top of the right panel to see a tooltip with the main component’s name.

Depending on the element, the default name is based on its:

• primary class (if applied)
• content (text elements only)
• asset name (static assets only)
• HTML tag
• element type (e.g., Section, Container, etc.)

Where custom names are used

When you rename an element or component instance, the custom name is used throughout Webflow — for example in the Navigator, on the canvas, in quick find results, in the audit panel, etc.

Custom names are only used for organization and identification when designing and building in Webflow — they aren’t published in your site’s HTML or exported code.