How can I create nesting lists in Webflow?
TL;DR
- Drag a List element into the canvas and add list items.
- Select a list item, drag another List inside to nest it, and use styling (margin/padding or classes) for indentation and clarity.
- Use the Navigator to confirm hierarchy and publish to inspect the HTML structure in-browser.
Creating nested lists in Webflow involves manually setting up a list within another list since Webflow’s native List element doesn’t automatically support multi-level nesting like in HTML.
1. Add the Parent List
- Drag a List (either unordered or ordered) into your canvas from the Add panel.
- Add List Items (LI) as needed using the Inspector or by duplicating existing ones.
2. Nest a List Within a List Item
- Select a List Item (LI) where you want to add a nested list.
- Drag another List inside the selected list item.
- This creates the nested structure visually and semantically.
3. Style the Nested List
- By default, the nested list may appear identical to the parent.
- Use padding or margin on the nested list to create indentation for clarity.
- Optionally, create separate Classes to style nested items differently (e.g., smaller font size or different bullets/numbers).
4. Preview the Structure
- Use the Navigator panel to ensure the nested list is correctly placed inside the corresponding list item.
- The hierarchy should show List > List Item > Nested List.
5. Publish and Test
- Publish your site and inspect the list in the browser.
- Right-click > Inspect Element to confirm the correct HTML structure if needed.
Summary
To create nesting lists in Webflow, manually place a new List element inside an existing List Item and style it for proper indentation. Use the Navigator to confirm the correct structure.