Building Navigation tree without Graph traversal. Anchor Navigation benefits for a blog.

I want to share with you one short, straightforward and exciting software development story.

As mentioned earlier, People.ai’s website has a blog. Marketing and sales teams regularly post articles, and some of them are huge (4000+ words). Working with the metrics, I noticed that people leave the posts before they finish reading. I have found out that navigation through the articles is quite challenging, and you can do it only while scrolling the page. And the logical step was to add a sidebar with navigation by paragraphs.

My first idea was to find a lightweight library or a WordPress plug-in, but I realized that the plug-ins are usually over-engineered or don’t solve our goal easily and elegantly. And I decided to build my “own bicycle” — a navigation widget.

Obviously, as step one, I have written a regular expression that collects all headers from the WordPress output to an array.

Once the headers are collected in the same order as in the HTML output, I build a Tree where H2 tags are parents and H3–H6 tags are children.

It is a classic scenario of building a graph by traversing through the headers list.

As the plug-in renders the list, I transform the hierarchical structure to a plain list. The magic trick is to add a class that keeps the data about ranking to the tag “<li>” and adds the padding to each CSS class depending on the H hierarchy (size). For example, from 10 px for H2 to 50 px for H6. As one example:

That magic trick saves your developing time, makes code transparent, easier to write and debug. Also, use less CPU time for calculation.

To make an expandable list for nested H elements, I use a straightforward trick with CSS and a couple of lines of JS code.

I have defined main-headers and marked them via CSS classes. The child tags are hidden by default via CSS style.

In the JS code, I added a listener to a click event to change the classes on the fly to make items visible after expansion.

I performed the A/B testing once I finished implementing the new navigation panel, where 50% of the readers didn’t see a navigation panel, and the other 50% saw the navigation panel. During 30 days of testing, the statistics showed a 23% increase in average reading time, and about 18% of the users scrolled to the end of the article.

Check out the rest of our technical blog to see more exciting stories and useful tricks from our engineering team.

Related posts:

It starts with an idea — forceful sometimes, nebulous most times. A tiny hint — two words, three words strung in harmony. Touching some emotion — joy, love or ecstasy — pain, sometimes. I watch…

We are honored to announce that KOM(Kommunitas) will be listed on XT.COM. KOM/USDT trading pair will be open in Innovation Zone. Please take note of the following go-live schedule: “Kommunitas…