Nested Lists

webflow-html

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

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