Auto-generated nested navigation

[hugodessomme]

Hello,

I would like in a column to display navigation of each element. My problem is some of my element have a parent, and I would in the generated navigation that it would create a sub navigation to the parent element.

For example :

/*doc

---
title: parent
name: parent
category: test

---
*/

...

/*doc

---
title: child
name: child
parent: parent

---
*/

output (what I want):

<ul>
   <li>
      <a href="#parent">parent</a>
      <ul>
         <li>
            <a href="#child">child</a>
         </li>
      </ul>
   </li>
</ul>

I know my code is wrong but for now I just copied the one in the hologram example project (header.html):

<ul class="list-group">
   <% @blocks.each do |block| %> 
      <li class="list-group-item">
         <a href="#<%= block[:name] %>"><%= block[:title] %></a>
      </li>
   <% end %>
</ul>

Help, anyone?
Thank you!

[rishabh-ink]

Hi @hugodessomme, this is possible by modifying the header.html in the following way. You can see this in action in the example of the Cortana theme. Here's a snippet from Cortana's _header.html:

<% catWrappers = Array.new %>
<% @categories.each do |cat| %>
  <% catWrapperName = cat[0].split(nameScope).first %>
  <% if not catWrappers.include?(catWrapperName) %>
    <% catWrappers.push(catWrapperName) %>
  <% end %>
<% end %>

<nav class="cortana-nav">
  <ul>
    <% if file_name.include?('index.html') %>
      <li><a class="active" href="index.html">Home</a></li>
    <% else %>
      <li><a href="index.html">Home</a></li>
    <% end %>
  </ul>
  <% catWrappers.each do |wrapper| %>
    <h3><%= wrapper %></h3>
    <ul>
    <% @categories.each do |cat| %>
      <% if cat[0].include?(wrapper) %>
        <% catName = cat[0].split(nameScope).last %>
        <% if catName == title.split(nameScope).last %>
          <li><a class="active" href="<%= cat[1] %>"><%= catName %></a></li>
        <% else %>
          <li><a href="<%= cat[1] %>"><%= catName %></a></li>
        <% end %>
      <% end %>
    <% end %>
    </ul>
  <% end %>
</nav>

In your hologram_config.yml file, you'd need to add:

name_scope: ' - '

The string - is used to separate the parent and child components in the category property. Finally, in your documentation, you'd need to use it as:

/*doc
---
title: Small text
name: typography-small-text
category: Scaffolding - Typography
---
*/
...
/*doc
---
title: Strong text
name: typography-strong-text
category: Scaffolding - Typography
---
*/

As you can see, each component needs to have a parent (in the above example, Scaffolding).

You can also give the Cortana theme a try, which support nested categories out of the box.

[hugodessomme]

I will give it a try! Thank you :)

[jdcantrell]

Closing this, you can do what you're looking for with more ruby code in the header.html or as @rishabhsrao using the Cortana theme (which is the same method but packaged up for you)