Webflow has built-in support for nested lists now, within rich text elements.
You can just start typing it on a new line in the rich text element. e.g. 1. Banana will start a numbered list. From there, press TAB to indent, or SHIFT+TAB to outdent any item.
Bulleted lists can be initiated by starting with a hyphen, like - Banana.
I’d recommend using Webflow’s designer build-mode rather than the legacy editor for a more solid edit experience.
Styling Rich Text Nested Lists
The system works quite well- but styling options are limited. Here's how you can style nested lists.
Basic Hierarchy Changes
If you want to style the numbering differently at different levels you can do that by adding an embed to the page with some custom CSS.
Here is an example for an ordered list, where level 1 will be decimals like 1. , level two will be upper-alpha like A. and level three lower-alpha as in a.
This can be customized, more levels can be added, and a similar approach can be used to vary bullets on an unordered list.
<style>
ol[role="list"] {
list-style-type: decimal;
}
ol[role="list"] > li > ol[role="list"] {
list-style-type: upper-alpha;
}
ol[role="list"] > li > ol[role="list"] > li > ol[role="list"] {
list-style-type: lower-alpha;
}
</style>Note that the above code will affect all ordered lists on the page.
Technical Outlines
What if you want to do a technical outline, like 1.1.1.? CSS can do that as well, using CSS counters.
This setup will work on a Rich Text Block you class hierarchical-list. My code here;
- Will apply technical numbering to all ordered lists within your rich text element
- Will restart for each one
- Handles 3 levels only- you can make it deeper by continuing the same pattern
- Doesn’t apply any level-specific styling, but you can
- Works in the designer at design time, if the
<style>chunk is in an embed rather than the before-/head custom code area.
<style>
.hierarchical-list > ol {
counter-reset: level1;
}
.hierarchical-list ol {
padding-left: 1.5em;
}
.hierarchical-list li {
display: block;
list-style: none;
}
.hierarchical-list > ol > li {
counter-increment: level1;
}
.hierarchical-list > ol > li::before {
content: counter(level1) ". ";
}
.hierarchical-list ol > li > ol {
counter-reset: level2;
}
.hierarchical-list ol > li > ol > li {
counter-increment: level2;
}
.hierarchical-list ol > li > ol > li::before {
content: counter(level1) "." counter(level2) ". ";
}
.hierarchical-list ol > li > ol > li > ol {
counter-reset: level3;
}
.hierarchical-list ol > li > ol > li > ol > li {
counter-increment: level3;
}
.hierarchical-list ol > li > ol > li > ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) ". ";
}
</style>
Obsolete Notes
The original notes here from our SA5 solution, prior to Webflow's native support for rich text nested lists.
Sygnal Webflow Utils (WFU) and Nested Lists.
