If you haven’t seen the announcement yet, Webflow released an update today to the designer navigation panel which allows you to custom name any element in the left-side navigation.
It's very useful, but the change is also confusing users, so let's have a look at what it does, what it doesn't do, and how to use it.
What is it?
This feature allows you to give a new, custom name to any element in the nav.
It does not actually rename anything.
Despite how the new custom name UX feels, "renaming" a classed element or a component instance in the left nav does not actually rename the class, component, or custom element tag of that element.
Instead, it creates a new custom name for that individual element, and displays that instead.
Unfortunately, these custom names have no visual distinction in the nav, which means that simply looking at the left nav won't tell you whether you're looking at a custom name, a first class name, a custom element tag, an element type name, or something else.
What am I seeing?
Webflow uses logic that is loosely like this to choose each element name that it shows you in the nav;
How can I use it?
Despite the confusing UX, custom element names are very handy because you can give much more meaningful, visible names to elements and sections without creating class bloat.
This makes it much easier to structure your page in a way that’s more readable.
I’m especially using it for those important but hard-to-find items;
- Modals, pop-ups, overlays, side-trays and other special UX elements
- CSS embeds
- JSON-LD embeds
- Special admin areas
- Component instances, which deserve a functional name in your layout
- Deprecated elements, that I want to remove after a refactor
Moreover, you can use icons as part of the name so that important pieces stand out more visibly when you need them to.
UX Notes
- Double-click any item in the nav to create a custom name.
- Pressing ALT+R / OPTION+R will also rename the currently selected nav element.
- The main edit action for components and embeds is now moved to and icon at the right side of the element, when you hover.
- To undo a custom name, right click and select Reset name
Best Practices
- Use it when and where it makes sense. You don't need to create custom names for every element, only for those where the default name is inadequate.
- Use it anywhere you would have created a "fake class" just to have a named Embed or other element in the left nav.
- Use it any time you are naming Component Slots.
Use icons where they help you
For now, I'd recommend using an icon on every custom name you apply.
Icons are great for visually identifying key elements, like CSS, JSON-LD and script embeds, and if you use them consistently, they simply make it possible to identify custom names.
You can copy-paste some useful emoticons here-
