Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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.
Ruby CoffeeScript JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
.sass-cache/dee5c1696b53a5db8342d6b3792b979412cf849f
lib
spec
test_app
.gitignore
.rspec
.travis.yml
Gemfile
Guardfile
LICENSE
README.md
Rakefile
slim_breadcrumb.gemspec

README.md

SlimBreadcrumb Build Status

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

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request
Something went wrong with that request. Please try again.