Auto-generated nested navigation

[hugodessomme]

Auto-generated nested navigation

[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)