slim_breadcrumb

SlimBreadcrumb

This is a ruby on rails gem to slim out certain elements of a breadcrumb navigation and show these elements only if the user's mouse dwells on the breadcrumb separator.

Clicking on a separator also shows the hidden elements near the mouse. Doubleclick anywhere in the breadcrumb area will show all hidden breadcrumb elements.

Demo

You might want to have a look at this demo app at heroku.

The code of this demo app can be found here.

Installation

Add this line to your application's Gemfile:

gem 'slim_breadcrumb'

And then execute:

$ bundle

Or install it yourself as:

$ gem install slim_breadcrumb

Include Assets

In app/assets/javascripts/application.js, add:

//= require slim_breadcrumb

Usage

In order to use this gem, you may use any tool of convenience to create your breadcrumb html code. The produced html code should look something like this:

<nav>
  <div id="breadcrumb">
    <ul>
	  <li class="first crumb"><a href="#">#0 (Root)</a></li>
	  <li class="crumb sep">&nbsp;</li>
			  
	  <li class="slim crumb"><a href="#">#1 (Slim Crumb)</a></li>
	  <li class="crumb sep">&nbsp;</li>
				  
	  <li class="slim crumb"><a href="#">#2 (Slim Crumb)</a></li>
	  <li class="crumb sep">&nbsp;</li>
							  
	  <li class="crumb"><a href="#">#3 (Normal Crumb)</a></li>
	  <li class="crumb sep">&nbsp;</li>
									  
	  <li class="slim crumb"><a href="#">#4 (Slim Crumb)</a></li>
	  <li class="crumb sep">&nbsp;</li>
													  
	  <li class="slim last crumb"><a href="#">#5 (Slim Crumb)</a></li>
    </ul>
  </div>
</nav>

The important parts of this example are the css classes and the id #breadcrumb, the script relies on.

If you'd like to have a look at the script, which is rather simple, you can do this here.

You also have to handle your stylesheets for the breadcrumb yourself. An example stylesheet can be found here. Note that you may use the breadcrumb separator image just as done in the example, since this gem is providing this image.

Contributing

• Fork it
• Create your feature branch (git checkout -b my-new-feature)
• Commit your changes (git commit -am 'Added some feature')
• Push to the branch (git push origin my-new-feature)
• Create new Pull Request