Add breadcrumbs to the Admin Center

Find yourself getting lost within the depths of the admin interface? Wish there was a quick, easy, user-friendly way to see where exactly you are? Why not add breadcrumbs to the top of your template and make it easier for yourself.

Example

Using this guide, you can add a message like this under the navigation bar in the Admin Center:
You are here: » admin » dashboard » welcome

We will use an unordered list (<ul>), to allow for easy customizing with CSS.

The code

Go to 'app > views > layouts > admin.rhtml'.
Decide where you want to place your breadcrumbs in the top-bar of the admin area.
Add this script:

<div id="breadcrumbs">
  <ul>
         <li>You are here:</li>
<%=
s = ""
url = request.path.split('?')  #remove extra query string parameters
levels = url[0].split('/') #break up url into different levels
levels.each_with_index do |level, index|
  unless level.blank?
    if index == levels.size-1 || 
       (level == levels[levels.size-2] && levels[levels.size-1].to_i > 0)
      s += "<li>&#187;</li><li>#{level.gsub(/_/, ' ')}</li>\n" unless level.to_i > 0
    else
        link = "/"
        i = 1
        while i <= index
          link += "#{levels[i]}/"
          i+=1
        end
        s += "<li>&#187;</li><li><a href=\"#{link}\">#{level.gsub(/_/, ' ')}</a></li>\n"
    end
  end
end
s
-%>
</ul>
</div>

The styling

Now to finish up go to 'public > stylesheets > admin.css'.

Scroll down to where you want to place your code and put:

/* BREADCRUMBS */
#breadcrumbs{ 
    border: 1px dotted #CCCCCC;
    margin: 5px 0px 0px 10px;
    font-size: 50%;
}

#breadcrumbs ul{ 
list-style-type: none;

display: inline;
  margin: 0 10px 0 10px;
}

#breadcrumbs ul li{
float: left;
padding: 0 10px 10px 10px;
}

And that's all there is to it! Simple breadcrumbs in the drop of a hat!