Is it possible to include sub sections of a page in the navigation?

[khoivan88]

Hi,

I am looking into using this plugin and I think it would dramatically reduce the amount of time I would need building a page 'by hand'. One of the thing I need is the ability to add links to sub section of a page and not just the page itself. I read over the docs on 11ty docs page but not sure if this could be done. I was wondering if anybody might have a solution for this?

Thank you very much!

[Ryuno-Ki]

Hi @khoivan88,
what do you mean by subsection? Something below a headline?
Or a <section>?
How would the navigation be rendered in the ideal case?

Perhaps markdown-it-anchor with a custom configuration would get you there?

[khoivan88]

Hi @Ryuno-Ki ,

Sorry for the confusion, I just meant some div with different id on the same page.
So, for example I have this page1.html:

...
    <div id='page1-div1'>...</div>
    <div id='page1-div2'>...</div>
...

I was wondering if there is a way with this plugin that when I list the navigation I can get:

- Page 1:
   - Div 1
   - Div 2

[bjmiller121]

Have a look at the Overriding the URL example in the documentation.

If I understand your use-case correctly, you can create a new template with something like this:

---
eleventyNavigation:
  key: Link Text
  url: /page1#page1-div1
permalink: false
---

This will add a link to the navigation that will anchor link to the element on the page with the specified ID. permalink: false ensures that an html page isn't generated for this placeholder template. Not the cleanest solution since a file is required for each anchor link in the navigation, but you might be able to do something clever with a data file and pagination if you plan on having lots of anchor links in your navigation.

[khoivan88]

Hi @bjmiller121 ,

Thank you very much for your suggestion. I ended up just use this TOC plugin to list all of the heading inside each page: https://www.npmjs.com/package/@thedigitalman/eleventy-plugin-toc-a11y