Nested Lists

Nested lists using WFU markup

Standalone List, with Nesting

Mark up your ordered & unordered lists in Webflow with simple start-of-line markup to indicate your list item depth.

This is automatically converted by WFU's nesting script into an HTML nested list structure.

  • Supports editing your lists more naturally in the Webflow Designer and editor.
  • Supports both Ordered Lists and Unordered Lists.
  • Markup lists quickly and easily
  • > A single > indents one level
  • > Two >> is two levels
  • > Three >>> is three levels, and so on
  • Preserves list item content and styling, including bold, italics, and links.
  • Allows you to target specific elements, so that only the lists you want are affected.
  • > Put a custom attribute on your list of wfu-lists = all

DEMO

This is a standalone Webflow List element which can be easily dropped and edited in the Webflow Designer. , which contains our item markup;

  • Main item
  • > Indented item
  • >> Double-indented item
  • Back to level 1

Rendered list

This is how that same list renders, when tagged with a custom attribute of wfu-lists=all.

  • Main item
  • > Indented item
  • >> Double-indented item
  • Back to level 1

Nested lists in Rich Text Elements

Nesting works just as fully within rich text elements that are marked up with WFU's custom attribute.

  • Obfuscates your markup during page load so that your users do not see it. Only the finished nested list is visible.
  • Extensive styling options with some CSS work- including the ability to set the bullet or number format at different list levels.
  • Preserves list item content and styling, including bold, italics, and links.
  • Allows you to target specific RichText elements, so that only the lists you want are affected.
  • > Put a custom attribute on the Rich Text Element wfu-lists = all

DEMO

All of these lists are created and edited in the Webflow's Designer / Editor. They are converted to nested lists when the page loads.

  • Top-level item files that are stored in your site assets  
  • > Level 2 item
  • >> Level 3 item
  • Vegetables
  • > Broccoli
  • > Carrots

Rendered list

This is how that same list renders, when the Rich Text Element is tagged with wfu-lists=all.

  • Supports SVG files that are stored in your site assets  
  • > Level 2 item
  • >> Level 3 item
  • Vegetables
  • > Broccoli
  • > Carrots

PROs & CONs Styling

Another feature of WFU's formatted lists capability is PROs & CONs styling.

  • Quickly mark up list content with + and - prefixes to indicate PRO and CON items.
  • > + This is a PRO item, prefixed with a +
  • > - This is a CON item, prefixed with a -
  • > Both work alongside nesting, e.g. > +

DEMOS

Here's an example of a hierarchical list which also contains special list item markup for PROs (+) and CONs (-).

  1. > Cabbage
  2. >> + Red Cabbage
  3. >> - Chinese Cabbage
  4. >>> three indent item
  5. > one indent item
  6. + Uses CSS Filter effects to color your black SVGs to any color you want
  7. List item content with formatting such as boldface, italics, and links is preserved.

Rendered list

How this markup looks when rendered.

NOTE: Working on the formatting issues regarding color propogation to sublists.

  1. > Cabbage
  2. >> + Red Cabbage
  3. >> - Chinese Cabbage
  4. >>> three indent item
  5. > one indent item
  6. + Uses CSS Filter effects to color your black SVGs to any color you want
  7. List item content with formatting such as boldface, italics, and links is preserved.

How to implement

Use the Video link in the top menu for a complete walkthrough.

01 The basic process

Add your CSS to your Site

  • Add WFU to your Site, with the CSS and JS links.
  • Identify any Rich Text Elements or standalone List Elements where you want nesting support. Tag those elements with a custom attr of wfu-lists=all.
  • Create your lists. Prefix any list item with a > to indent it, or with a + or - to identify it as a PRO or CON. These can be combined.

02 Tips and best practices

  • Though there is no restriction, it's generally best not to skip levels at the start of lists, e.g. > to >>>.
  • PROS and CONS can be styled to meet your needs. Likely, WFU themes and cloneables are coming at some point to help simplify this.

03 Styling PROs & CONs

The easiest way to do this in the Webflow designer is to create a separate LIST Element, outside of a Rich Text Element. In this form, you can apply classes directly to individual list items.

A default list will contain 3 items,

  • Select the first item, and create a CSS selector in webflow of wfu-pro.
  • Style that item as you like, especially color.
  • Select the second item, and create a CSS selector in webflow of wfu-con.
  • Style that item as you like, especially color.
  • In your published site, you'll be able to see how this looks in your generated list.
  • Unfortunately Bullet changes must be created in CSS or STYLE elements, as the Webflow designer doesn't support custom bullets in the designer.
  • This is the style for a PRO list item, created using the markup +
  • This is the style for a CON item, created using the markup -
  • This is the style for list items that are neither PRO nor CON