Add support for hierarchical (multi-level) menu items with user defined order

[ssbarnea]

While do find pelican extremly usefull, I was surprised to discover that there is no support for hierarchical menu items. So far the only current option is it create them as part of the theme which is not a good practice.

[justinmayer]

Hi Sorin. Personally, I find drop-down navigation menus on the web to be an anti-pattern with poor usability and thus avoid them whenever possible.

That's just one person's opinion, of course. What do others think? Is this the type of feature that belongs in Pelican core or in themes/plugins?

[ssbarnea]

I do know what you mean, most of them are like this but I've seen really well designed ones, ones that do work well with touch based devices and also on multiple screen sizes. Still, the only thing that I wasn't able to solve regarding their usability is regarding how to indicate someone that the expanding menu could also be a page.

Now regarding where this should belong, that's tricky as it always good to keep the core as simple as possible. Still the navigation is a core feature itself. At this moment my experience with Pelican can be measured in hours (not even days), so I am not in a position to recomend an implementation.

Python is an amazing platform so we may be able to find a solution that is backwards compatible with old themes / configs... Maybe keeping this as a single list and just adding a expanding code for future thems that is able to generate multi-level menus.

[saimn]

I'm +1 with @justinmayer but it should be easy to customize. MENUITEMS is only used in the theme templates, so you can do whatever you want with it in your template. The current usage in the notmyidea theme is:

{% for title, link in MENUITEMS %}
   <li><a href="{{ link }}">{{ title }}</a></li>
{% endfor %}

[ssbarnea]

Let's try to think about a nice solutuon, especially from the user point of view.

Clearly the template-code above would not work to generate multi-level <li> menus.

If we would make MENUITEMS a sorted-dictionary that is iterable only on the first level by default. it could keep the code backward compatible.

Now, the questionis what kind of template-code we could have to generate the desired new functionality.

[legenderrys]

@ssbarnea I have a solution for this. Although I agree with justinmayer, here is what I came up with.

`
{% for p in pages if p.order =='parent' %}

{{p.title}} {% if p.order =='parent' %}

{% for childpage in pages if childpage.order == p.slug %}
• {{childpage.title}}
{% endfor %}

{% endif %}

{% endfor %} ` This approach would require adding metadata called "Order" for each page. example: (parent page) Title: Parent Page Order: Parent

(child of parent page)
Title: Child Page
Order: "insert the slug-name of its page parent"

@justinmayer , I agree

[justinmayer]

I get the feeling that this is best handled at the theme level, perhaps along with post meta-data as @hyperking suggested. Even if that were insufficient, a Pelican plugin would be a better fit than modifying Pelican's core for this use case.

[dkalisch]

This is something that I am looking for. However, the suggested method doesn't work for me. Is there something one need to set up besides adding Order: parent and Order: slug_name_of_parent in the .md and . rst files?