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.
.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.
Leave a Reply