Currently, there's no simple way to directly create nested lists using the rich text editor. There is however a relatively simple workaround that, while not generating semantic code, will provide not only the appearance but the general hierarchy of a multi-levelled ordered or unordered list.

Using the powerful features of Slices' repeatable zone, you can create a Slice that has two fields: A Select field that will allow you to select the level of indentation; and a Rich Text field that will contain the actual list content. Using these in conjunction will allows you to create nested lists within your content with minimum difficulties.

Modifying the Custom Type

Select the document type that you which to set up with the new nested lists slice. Add a new Slice in the Slice Zone and configure it with a descriptive name and icon. Next, in the Repeatable zone drag and drop a Select field. This will be our list level selector, so add as many levels as you will need to the Options.

Drag and drop a Rich Text field into the Repeatable zone as well. Since this will be the field that contains your actual list content, make sure to enable only the Ordered list and Unordered list icons, as well as disabling the option for allowing multiple paragraphs.

Here's an example JSON for how this Custom Type can look like for a list with up to three different levels.

"multi-level_list" : {
  "type" : "Slice",
  "fieldset" : "Multi-level list",
  "description" : "Nested ul/ol",
  "icon" : "format_list_bulleted",
  "display" : "list",
  "non-repeat" : { },
  "repeat" : {
    "list_level" : {
      "type" : "Select",
      "config" : {
        "options" : [ "level_1", "level_2", "level_3" ],
        "default_value" : "level_1",
        "label" : "list_level",
        "placeholder" : "Select the level for this list"
      }
    },
    "list" : {
      "type" : "StructuredText",
      "config" : {
        "single" : "list-item, o-list-item",
        "label" : "List",
        "placeholder" : "List items for this level"
      }
    }
  }
}

 

Creating a nested list in the Writing Room

With this custom slice you can easily create multi-level lists as part of your content. After selecting and adding the slice to your document, the process to create a new list is straightforward. Select which level of indentation your list content will have using the dropdown, and write the list inside the rich text field. If you need to add a new level, just Add a new element to the Group, select the desired indentation level for this sub-list, and keep writing the content. You can repeat as much as you need to until you've created your whole multi-level list.

Rendering the nested list

Actually rendering the list so it appears to be nested requires modifying the code you're using to render slices in your document. Feel free to refer to the documentation for your preferred language. You can retrieve the option chosen in the Select field ('list_level' in our example) which can be set as the class attribute for the rendered Rich Text field ('list'). Then it's a matter of modifying the CSS for these different classes to provide different indentation by using margin properties, as well as removing any spaces in between the lists.
 

Code example

Using the API names from the JSON earlier, it's possible to render a nested list. For this demonstration, we'll use pug, but you can adapt this to your configuration of choice.

when 'multi-level_list'
  div.post-part.single.container.multi-list
    for item in slice.items
      - var level = item.list_level
      div(class='multi ' + level)
        !{PrismicDOM.RichText.asHtml(item.list)}

As well as the associated CSS:

.multi > ul, ol {margin-bottom: 0px;}
.multi_list     {margin-bottom: 20px;}
.multi.level_2  {margin-left:   1em;}
.multi.level_3  {margin-left:   1.9em;}

Modify and adjust to your actual needs.

Let us know how it worked out for you, or if you still have doubts on how to implement this solution.

Did this answer your question?