Nested Lists ❺

Add nested lists to Webflow's rich text elements

Webflow Update!

In Mar 2024 Webflow has released native support for nested lists within rich text elements. We've not tested it extensively, however it passes initial review well.

• Easy to use, simply hit tab on a list element to indent it

• Works in the Editor ( absolutely key! )

There is some manageable glitchiness while editing nested lists, where it may get confused and stack your item depth, but this is relatively easy to fix in the editor.

We've not tested;

• Whether nested lists can be varied ( ordered and unordered )

• Whether specific levels can be styled uniquely in the designer

Future Notes

We'll likely redesign SA5 Nested Lists so that it can take advantage of Webflow's new native nested list capabilities, and add certain features like our PROs and CONs capability, and possibly themes support.

SA5 Nested Lists - Legacy Docs

We'll keep nested list support as a part of SA5 even most or all of the capabilities become available natively in Webflow, to ensure current users can continue to use the indenting approach they're familiar with.

Note however that we recommend at least trying Webflow's approach on new site builds and using it if it meets your needs. This would prevent any weirdness with end-clients possibly trying to use both nesting solutions at the same time on the same list, which would have unpredictable results.

• 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

In the editor, this will look like;

• Top level

• > Indented one level

• >> Indented two levels

• >> Also indented two levels

• > Indented one level

Published example

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

Webflow Smart Elements - WebflowWebflow Smart Elements

Cloneable

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.