Links

Nested Lists ❺

Add nested lists to Webflow's rich text elements
  • Easily indicate nesting depth by prefixing list items with >’s.
  • Supports both ordered ( OL ) and unordered ( UL ) lists.
  • Compatible with editor mode.
  • Additionally prefix items with + or - for special PRO and CON lists
  • Themes support - default, modern, fun

Nested List Markup Syntax

To indent list items, simply prefix the list items with > to indicate the depth. We recommend you do not skip levels.
Markup example
Published example
In the editor, this will look like;
  • Top level
  • > Indented one level
  • >> Indented two levels
  • >> Also indented two levels
  • > Indented one level
In the published site, this will render as;
  • Top level
    • Indented one level
      • Indented two levels
      • Also indented two levels
    • Indented one level

PROs & CONs

To specially identify an item as a PRO or a CON, prefix it with a + or a - just after any indentation markers. The appearance, coloring and icon used will depend on the theme.

Important Change Notes

With SA5, we've made some structural changes, to enforce semantically valid HTML5 even when list levels are skipped, e.g. level 1 to level 3. This creates strange layout complications due to the fact that there is an empty LI element to contain each nested list properly. We recommend you avoid skipping levels.

Demonstration

See here for a demonstration of nested lists and the markup we use;
Rich Text
Demonstration Page

Usage Notes

I want the lists in this rich text element to be nested
Add this custom attribute to your rich text element;
wfu-lists=nested
I want a different theme for my lists
Apply the wfu-list-theme custom attribute to the rich text element.
  • default ( applied automatically when none is specified )
  • modern
  • fun

Getting Started

100% NOCODE All aspects of this feature are attributes-based for your convenience.

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes you want

See above.