V aplikaci běžně potřebujeme navigační menu. Seznam odkazů na jednotlivé části aplikace. V dobách HTML se to řešilo různě, neb design menu byl dán html kódem. To je ale již zbytečné, protože můžeme použít CSS. Jak tedy na menu? Nejdříve samotné položky menu. Napíšeme je do tagu ul:

<ul>
    <li><%= link_to 'Lidé', :controller => 'people'%></li>
    <li><%= link_to 'Firmy', :controller => 'firmy'%></li>
    …
</ul>

První vylepšení které na našem HTML provedem, je změna zobrazení aktuální položky. Chceme aby když jsem na stránce firem, tak aby odkaz na firmy (druhý li element) byl neaktivní. Toho můžeme dosáhnout podmíněným link_to. Například:

<% if podmínka %>
    <%= link_to 'Firmy', :controller => 'firmy' %>
<% else %>
    Firmy
<% end %>

Tento zápis nám dává plnou kontrolu nad tím, co se bude zobrazovat. Ovšem pro většinu případů je příliš dlouhý. Místo něj můžeme použít metodu link_to s podmínkou:

Máme ovšem k dispozici ještě silnější metodu a to link_to_unless_current. S její pomocí přepíšeme původní kód na:

<ul>
    <li><%= link_to_unless_current 'Lidé', :controller => 'people'%></li>
    <li><%= link_to_unless_current 'Firmy', :controller => 'firmy'%></li>
    …
</ul>

To jakým způsobem se bude menu zobrazovat pak řídíme pomocí stylesheetu. Abychom ho mohli napsat, potřebujeme si menu nějak označit. Pokud vyjdeme z toho že na stránce je právě jendo hlavní menu, můžeme je vepsat do tagu div:

<div id="menu">
    <ul>
        …
    </ul>
</div>

K takto vytvořenému HTML kódu nyní dopíšeme CSS. Můžeme si pomoct a nechat si CSS vytvořit například pomocí CSS Menu Makeru, či si jej napsat sami například podle Horizontal and Vertical CSS Menu Tutorial.