# 2 level horizontal navigation in Rails

**URL:** <https://www.ruby-forum.com/t/2-level-horizontal-navigation-in-rails/138054>\
**Category:** Rails\
**Created:** [May 19, 2008, 10:12pm UTC](https://www.ruby-forum.com/t/2-level-horizontal-navigation-in-rails/138054 "2008-05-19T22:12:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![remco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/9d8465/32.png) [@remco](https://www.ruby-forum.com/u/remco)\
**Post date:** [May 19, 2008, 10:12pm UTC](https://www.ruby-forum.com/t/2-level-horizontal-navigation-in-rails/138054/1 "2008-05-19T22:12:32Z")

</div>

Hi,

I want navigation structure like this…

- Home
- Products
  - Software
  - Hardware

Someone good ideas or link, plugins, helpers to realize this in rails?

swoany

---

<div class="post-metadata">

**Author:** ![remco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/9d8465/32.png) [@remco](https://www.ruby-forum.com/u/remco)\
**Post date:** [May 20, 2008, 12:11pm UTC](https://www.ruby-forum.com/t/2-level-horizontal-navigation-in-rails/138054/2 "2008-05-20T12:11:47Z")

</div>

On May 19, 2008, at 1:12 PM, Remco S. wrote:

> Someone good ideas or link, plugins, helpers to realize this in rails?

Well, first off, nested

 is not valid XHTML, so you’re better off  
using CSS class to differentiate the nested level of various -   
items. That will also simplify the Ruby code (no need to create  
recursive functions).

I’d probably use an array of hashes:

products\_menu = [  
{:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent1’ },  
{:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent1’ },  
{:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent2’ },  
{:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent2’ },  
{:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent1’ },  
{:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent1’ },  
]

iterate that structure to create your

- lines, and use css to  
create the indent pattern you need.
\<% products\_menu.each do |nav\_item| -%\> '\<li id="' + nav\_item[:id] + '" class="' + nav\_item[:class]...etc \<% end %\> \</ul\> \<p\>Of course, that could be written as a general purpose helper so you\<br\> don’t have so much messy logic in the view file, but rather something\<br\> simple like this:\</p\> \<p\>\<% draw\_nav\_items(products\_menu) %\>\</p\> \<p\>– greg willits\</p\>

---

<div class="post-metadata">

**Author:** ![remco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/9d8465/32.png) [@remco](https://www.ruby-forum.com/u/remco)\
**Post date:** [May 20, 2008, 4:32pm UTC](https://www.ruby-forum.com/t/2-level-horizontal-navigation-in-rails/138054/3 "2008-05-20T16:32:18Z")

</div>

Google “son of suckerfish”

---

<div class="post-metadata">

**Author:** ![remco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/9d8465/32.png) [@remco](https://www.ruby-forum.com/u/remco)\
**Post date:** [May 20, 2008, 7:17pm UTC](https://www.ruby-forum.com/t/2-level-horizontal-navigation-in-rails/138054/4 "2008-05-20T19:17:04Z")

</div>

Greg W. wrote:

> On May 19, 2008, at 1:12 PM, Remco S. wrote:
> 
> > Someone good ideas or link, plugins, helpers to realize this in rails?
> 
> Well, first off, nested
> 
> is not valid XHTML, so you’re better off  
> using CSS class to differentiate the nested level of various -   
> items. That will also simplify the Ruby code (no need to create  
> recursive functions).
> 
> I’d probably use an array of hashes:
> 
> products\_menu = [  
> {:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent1’ },  
> {:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent1’ },  
> {:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent2’ },  
> {:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent2’ },  
> {:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent1’ },  
> {:id=\>’’, :title=\>’’, :href=\>’’, :text=\>’’, :class =\> ‘li\_indent1’ },  
> ]
> 
> iterate that structure to create your
> 
> - lines, and use css to  
> create the indent pattern you need.
> \<% products\_menu.each do |nav\_item| -%\> ' - remco

---

<div class="post-metadata">

**Author:** ![remco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/9d8465/32.png) [@remco](https://www.ruby-forum.com/u/remco)\
**Post date:** [May 20, 2008, 8:24pm UTC](https://www.ruby-forum.com/t/2-level-horizontal-navigation-in-rails/138054/5 "2008-05-20T20:24:11Z")

</div>

Greg W. wrote:

> > ```
> > <li id="hardw" title="link to hardware"><a
> > 
> > ```
> > 
> > href="#"\>Hardware
> > 
> > Someone good ideas or link, plugins, helpers to realize this in rails?
> 
> Well, first off, nested
> 
> is not valid XHTML

Yes it is. You’re just not allowed to nest a

_directly_ inside  
another
 because all children of 
 have to be - . But this:
      - ... 
      - ... 
 ... - ... 

is perfectly legal. I think it’s better too, because it reflects the  
menu  
logic, renders well without a stylesheet and allows for easy  
collapsing/expanding of subtrees. You can still have a flat  
representation  
in the database, that’s a matter of taste.

---

<div class="post-metadata">

**Author:** ![remco](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/r/9d8465/32.png) [@remco](https://www.ruby-forum.com/u/remco)\
**Post date:** [May 20, 2008, 9:43pm UTC](https://www.ruby-forum.com/t/2-level-horizontal-navigation-in-rails/138054/6 "2008-05-20T21:43:22Z")

</div>

On May 20, 2008, at 11:23 AM, Ix Quic wrote:

> ```
> <li> ... </li>
> </ul>
> 
> ```
> 
> is perfectly legal. I think it’s better too, because it reflects  
> the menu  
> logic, renders well without a stylesheet and allows for easy  
> collapsing/expanding of subtrees. You can still have a flat  
> representation  
> in the database, that’s a matter of taste.

Hmm, New to me. Never seen/tried

- 

. At first it  
seems really weird, but eventually makes sense, and it has the  
advantages you say.

Well then, a recursive function it is…

– gw