How to create a visual sitemap in Gutenberg without any plugin

In this tutorial, we will create a visual sitemap tree using the default list block with some custom CSS only.

First, you need to add a list block and assign the class tree. And add list items to represent your sitemap structure. Indent the list items that need to be the sub-tree items in the sitemap.

📝 Note: You must need to make each list item text Bold. This is an important step; otherwise, you won’t see the required result.

Here is the magic CSS code, which will make the list items look like an organize sitemap tree.

Learn how to add custom CSS code in WordPress Gutenberg

.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}
.tree, .tree ul {
    display: table;
}
.tree ul {
  width: 100%;
}
    .tree li {
        display: table-cell;
        padding: .5em 0;
        vertical-align: top;
    }
      
   .tree li:before {
            outline: solid 1px #666;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .tree li:first-child:before {left: 50%;}
        .tree li:last-child:before {right: 50%;}
 .tree strong {
            border: solid .1em #666;
            border-radius: .2em;
            display: inline-block;
            margin: 0 .2em .5em;
            padding: .2em .5em;
            position: relative;
        }

 .tree ul:before,       
.tree strong:before {
                outline: solid 1px #666;
                content: "";
                height: .5em;
                left: 50%;
top: -.55em;
                position: absolute;
            }
.tree ul:before {
                top: -.5em;
      

That’s it. You have a lovely visual sitemap tree.

Remember to link your list items to relevant pages/links.

The code used in this tutorial is from this code pen.

Gutenberg Block Library

Leave a Reply