nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to list sub sections of pages in left side navigation?

Reth

Hi everybody,

just wanted to know what are the possibilities to show also sub sections of pages within left side navigation like it is used here (e.g. Step 1, 2, 3 etc. seem all to be subsections of the entire page shown at the right part of the screen)? - I am referring to the red marked areas on this screenshot:

The only way I can think of ATM is to create individual sub pages for each sub section and show them embedded within the surrounding page at the right side. Hence sub sections as own pages are automatically listed in the left side navigation.

Or is there any other way to do this? And even more: Can this be done individually e.g. having one area/chapter with sub sections shown and another one without?

Thanks in advance for a short reply and

Kind Regards

Accepted answers

Brant Schroeder

@Reth You are correct that the navigation only lists actual pages. There is not a way to add page sections to the navigation. I am also not aware of any applications that provide this functionality.

Nic Brough -Adaptavist-

I think you've hit on the only answer. The page tree truly is a page tree. Table of contents works off headings (your sections), but it goes into the content of the page, not the tree.

Create the following set of pages, nested:

Main
- Section 1
- Section 2
- Section 3

Now, instead of putting content into Main, you can keep this really simple and just say:

(include: Section 1}

(include: Section 2}

(include: Section 3}

All comments

Brant Schroeder

@Reth You are correct that the navigation only lists actual pages. There is not a way to add page sections to the navigation. I am also not aware of any applications that provide this functionality.

Reth

Thank you. And how did they manage to show sub sections in the left-side navigation plus in a view as a single page at the right side in my example above? Creating individual subpages and embedding them into the main page?

Nic Brough -Adaptavist-

I think you've hit on the only answer. The page tree truly is a page tree. Table of contents works off headings (your sections), but it goes into the content of the page, not the tree.

Create the following set of pages, nested:

Main
- Section 1
- Section 2
- Section 3

Now, instead of putting content into Main, you can keep this really simple and just say:

(include: Section 1}

(include: Section 2}

(include: Section 3}

Reth

Do you mean the include page Macro here? While this is working in showing up the navigation on the left + the content into main page at the right side it does not allow for navigating within that page like the example does I provided above.

In the above example when I click on the subsections in the left navigation panel it jumps to the appropriate areas within the right main page (don't know how - anchors?).

But if I "just" include the subpages via include page macro described here (and how I expected to get it working) - whenever I click on a subpage in the navigation panel on the left that subpage gets loaded and displayed individually. But I would like to just to get "jumped" to the appropriate location within the main page at which the subpage is included!

How can I achieve this? Is this even possible or did the people building the page I used for reference above use completely other tools/techniques (outside the capabilities of Confluence)? Or maybe some special plugins/macros? Or did I miss sth. else?

Brant Schroeder

@Reth You would need to create a sub-page for every section if you would like it to be available in the left-hand page navigation. You could then place the page tree macro at the top of all of those pages if you would also like the navigation each page in addition to the left-hand page navigation.

The other option is to leave the page navigation as it without any sub-sections on the left-hand side and then include a table of content macro as suggested by @Nic Brough -Adaptavist- on the page. This would allow for easy navigation on the page once the user access it.

Reth

These 2 possibilities I know about. But how get a navigation view and experience done like in the example I linked in my OP?

Reth

Anybody by chance know how this is managed at the site I linked in my OP? By plain HTML/CSS or via Confluence (if the latter one: how?)?

Nic Brough -Adaptavist-

Yes, I do mean the include macro.

It's never going to navigate within the current page. The page tree is a page tree, not a document heading tree (that's the "table of contents" macro)

There's no way you can do what you are describing, the side bar only contains a page-tree.

Reth

So the confluence pages and examples are done without confluence you mean? :O

Brant Schroeder

@Reth Ask them if they have an app installed. I am not aware of one but there might be one.

Reth

This is what I was thinking too - or a special macro, or "plain HTML/CSS/JS stuff". Any idea about whom to ask in particular?

Brant Schroeder

I would ask the individual who manages your instance.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

server

confluence-server