Supported nested lists markup in Webflow’s Lists and within Rich Text elements.
Indicate nesting depth by prefixing list items with >
’s.
Also supports + and - prefixing for special PRO and CON lists.
DEMO - Nested Lists
Nested Lists in Webflow, with prefix markup.
Demonstration
View Demonstration in Webflow Designer
NOTE: There is currently a limitation in editing nested list elements in Webflow Editor mode.
Getting Started ( NOCODE )
STEP 1 - Add the Library
There are currently no configuration options for this library, so we’ll use a no-code integration approach.
Add this CSS script to the HEAD of your site or page.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/dist/css/webflow-html.css">
Add this JS reference to the BODY of your site or page.
<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/src/nocode/webflow-html.js"></script>
STEP 2 - Apply wfu-lists=nested
to Desired Elements
Positioning is important, make sure you’re placing this custom attribute on the correct element.
-
To nest a standalone list element, place it directly on the top level element in the list structure.
-
To nest lists within a Rich Text element, place it directly on the Rich Text element itself.
Can be placed on Rich Text elements (directly on the main element), or on
wfu-lists=nested