# Best to integrate dynamic navbar into layout

**URL:** <https://www.ruby-forum.com/t/best-to-integrate-dynamic-navbar-into-layout/51523>\
**Category:** Rails\
**Created:** [January 2, 2006, 7:07am UTC](https://www.ruby-forum.com/t/best-to-integrate-dynamic-navbar-into-layout/51523 "2006-01-02T07:07:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![charlie\_bowman](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/b5e925/32.png) [@charlie\_bowman](https://www.ruby-forum.com/u/charlie_bowman)\
**Post date:** [January 2, 2006, 7:07am UTC](https://www.ruby-forum.com/t/best-to-integrate-dynamic-navbar-into-layout/51523/1 "2006-01-02T07:07:08Z")

</div>

I’ve been trying to come up with a good way to integrate a dynamic  
navbar into my layout. By dynamic, I meas that each link has 3 images.  
Normal, rollover, and dark for the current page. I have it working but  
it seems like there should be a better way. Here is how I did it,  
please let me know if there is a better way. Rails makes so many things  
simple, that this seems very awkward.

In my layout:  
\<%= navigation\_bar %\>

In my application\_helper.rb  
if @current\_page == :home  
@home\_link = ‘[![home](https://www.ruby-forum.com/images/home_dark.gif)](https://www.ruby-forum.com/store/home)’  
else  
@home\_link = ‘[![home_button](https://www.ruby-forum.com/images/home.gif)](https://www.ruby-forum.com/store/home/)’  
end

```
if @current_page == :about
  @about_link = '<td width="80" class="button_background"><a 

```

href=“/store/about”\> ![about](https://www.ruby-forum.com/images/about_dark.gif)’  
else  
@about\_link = ‘[![about_button](https://www.ruby-forum.com/images/about.gif)](https://www.ruby-forum.com/store/about/)’  
end

## this goes on for about 7 more links then I combine each variable into

one and return this to the layout.

In each template  
\<% @current\_page = :home #or what ever link I want to be dark

---

<div class="post-metadata">

**Author:** ![charlie\_bowman](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/b5e925/32.png) [@charlie\_bowman](https://www.ruby-forum.com/u/charlie_bowman)\
**Post date:** [June 7, 2006, 1:17am UTC](https://www.ruby-forum.com/t/best-to-integrate-dynamic-navbar-into-layout/51523/2 "2006-06-07T01:17:03Z")

</div>

I’ve started something similar which might help. It treats the navbar as  
a list menu with css to be more semantically correct.

First, specify the navbar list items in the application helper so it’s  
accessible to all the views. In app/helpers/application\_helper.rb put:

module ApplicationHelper  
def navbar(x)  
“

- ” + (link\_to\_unless\_current ‘View Books’, “/books/list”) +  
"&nbsp;:&nbsp;" + “
- ” +  
“
- ” + (link\_to\_unless\_current ‘View Authors’, “/authors/list”) +  
"&nbsp;:&nbsp;" + “
- ” +  
“
- ” + (link\_to\_unless\_current ‘View Categories’,  
“/categories/list”) + “
- ”  
end  
end

The in any of your view files you can include the helper by calling for  
it while passing it the url\_for the current page. For example in  
app/views/books/list.rhtml put:

\<%= navbar(url\_for) %\>

That will pass along the current pages url to the helper. And notice  
it’s wrapped in the html ul tag with a css style id.

In public/stylesheet/scaffold.css add the styles for your navbar:

#navbar {  
background: #CCCCCC;  
line-height: 2.7em;  
font-family: Verdana, Arial, Helvetica, sans-serif;  
}  
#navbar li {  
display:inline;  
}  
#navbar li a {  
background: #003399;  
padding: 0.7em 1em;  
text-decoration: none;  
color: #FFFFFF;  
}  
#navbar li a:hover {  
background: #990000;  
padding: 0.7em 1em;  
text-decoration: underline;  
color: #FFFFFF;  
}

In the various styles you can say to use different background\_images for  
a:visited a:hover, etc… This example just uses different colors. It  
might take a little while to figure out the styles just the way your  
want them but having a global navbar that’s written only once is much  
easier to manage. If you add five more links or take away one you can do  
it in one place and it’s reflected on every page. You won’t need the  
MM\_swapImage js also.

Hope this helps.

DAN

---

<div class="post-metadata">

**Author:** ![charlie\_bowman](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/b5e925/32.png) [@charlie\_bowman](https://www.ruby-forum.com/u/charlie_bowman)\
**Post date:** [June 7, 2006, 7:04am UTC](https://www.ruby-forum.com/t/best-to-integrate-dynamic-navbar-into-layout/51523/3 "2006-06-07T07:04:32Z")

</div>

You could make the links an array to ease maintenance:

module ApplicationHelper  
nav\_links = [  
[‘View Books’, ‘/books/list’],  
[‘View Authors’, ‘/authors/list’],  
[‘View Categories’, ‘/categories/list’]]

def navbar(links)  
links.collect {|link| “

- #{link\_to\_unless\_current link.first,  
link.last}
”}  
end  
end
# in the view:

\<%= navbar(nav\_links) %\>

---

<div class="post-metadata">

**Author:** ![charlie\_bowman](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/b5e925/32.png) [@charlie\_bowman](https://www.ruby-forum.com/u/charlie_bowman)\
**Post date:** [June 7, 2006, 12:58pm UTC](https://www.ruby-forum.com/t/best-to-integrate-dynamic-navbar-into-layout/51523/4 "2006-06-07T12:58:59Z")

</div>

I would put the html in a partial…