#162 Tree-Based Navigation (revised)

Dec 01, 2012 | 10 minutes | Active Record, Views, Plugins

If your Rails app is content-heavy, consider organizing it in a tree menu structure. Here I show how to add top-level tabs, nested links in a side bar, and breadcrumbs to go up the hierarchy.

Click to Play Video ▶

Download:
source codeProject Files in Zip (42.6 KB)
mp4Full Size H.264 Video (18.5 MB)
m4vSmaller H.264 Video (10.5 MB)
webmFull Size VP8 Video (14.1 MB)
ogvFull Size Theora Video (22 MB)

teleservices about 12 years ago

Could you post the CSS for the menus? Or add to show notes?

Scott about 12 years ago

It's in the GitHub repo:
https://github.com/railscasts/162-tree-based-navigation-revised/blob/master/cms-after/app/assets/stylesheets/pages.css.scss

Milovan Zogovic almost 12 years ago

And if you use fragment caching, you should highlight current page in menu using javascript.

David Smith over 11 years ago

Is this true? Is there a way to cache a fragment in the context of the currently viewing page?

Daniel Fischer almost 12 years ago

Or you can use pure CSS to highlight current page based on nested classes.

E.g, body.products > nav.item

Highlight nav.item.products when the body is also products.

Tilo almost 12 years ago

I would also recommend the mongoid-ancestry gem for Mongoid based Rails apps.

Aaron Cruz almost 12 years ago

I thought simple_format might be new... then I found that it was added 8 years ago :P

Arnaud Lenglet almost 12 years ago

Thanks for this episode.

Is there a technical reason for chosing the "Ancestry" gem rather than the "Awesome nested set" gem ? The second one seems to be more popular for few months no ?

I'm afraid that, if I start building my app with Ancestry, it could be deprecated in few weeks. :/

David over 11 years ago

Awesome episode. Is there any way to hide the child and when click on the parents show them? I can use a Javascript for that?

John Ellis over 11 years ago

Yes, you could do something like this:

          html
        
<ul class="items">
  <li>Root Item 1</li>
  <li>Root Item 2</li>
  <li>
    Root Item 3 With Children
    <ul style="display:none;">
      <li>Child Item 1</li>
      <li>Child Item 2</li>
    </ul>
  </li>
</ul>

And then open the submenu with, let's say jQuery:

          javascript
        
$(function(){
  $("ul.items li").click(function(){
    $(this).children('ul').toggle();
  });
});

David over 11 years ago

Thank you very much John! that really works.

9zb over 7 years ago

Thanks, really helpful!

Taylor Williams over 11 years ago

I'm having difficulty finding out how to go about ordering the sub-tree navigation alphabetically?

Taylor Williams over 11 years ago

I see, it's all in the arrange!

https://github.com/stefankroes/ancestry#arrangement

AndyWarhola over 7 years ago

I had a very similar problem. Thank you for posting a solution, this does not happen often on the internet :)

bparanj over 8 years ago

The source code for this episode has been updated to Rails 4.2.6. You can download it from cms4