Create a table of content with Live Search box on the left of the page

[Ronan]

I am wanting to create a User Guide documentation on my Confluence with the below layout. 

It should have two parts:

- The left navigation displays the table of content of the documentation. And there is the Live Search box on the top.

- The right is the content body. When I select a node from the left navigation, its content will show here.

And the question here is how to create a page with that layout? What macro or template should I use? Please advise me. Thanks!

You can see the live layout at https://developer.atlassian.com/cloud/confluence/rest/intro/

[Liam Green]

Hi @Ronan 

If you click the layouts button and choose left sidebar then add the table of contents macro to the left column it should work

Hope that helps,

Liam

[Ronan]

Sorry for the late response!

And thanks @Liam Green for your suggestion. But, it is not my expected. 

If I use the Table of Content macro and insert it into the first column of the Left Sidebar layout, I have to enter the whole content of the document in the right column. And it will create a long scrolling page. :( 

I am expecting the first column should contain a navigation tree that each node in the tree corresponds to a heading in the document. When I click on a tree node, the right column will only load the content of that selected tree node.