https://github.com/fiedl/slim_breadcrumb

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.
https://github.com/fiedl/slim_breadcrumb

Last synced: 20 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/fiedl/slim_breadcrumb
• Owner: fiedl
• License: mit
• Created: 2012-06-11T11:17:19.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2013-03-30T23:40:46.000Z (over 11 years ago)
• Last Synced: 2024-10-23T06:36:05.249Z (28 days ago)
• Language: Ruby
• Size: 633 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SlimBreadcrumb [![Build Status](https://secure.travis-ci.org/fiedl/slim_breadcrumb.png?branch=master)](http://travis-ci.org/fiedl/slim_breadcrumb)



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](http://slim-breadcrumb-test-app.herokuapp.com/).

The [code of this demo app can be found here](https://github.com/fiedl/slim_breadcrumb/tree/master/test_app).

## 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:

```javascript

//= 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:

```html

  


    


	  
#0 (Root)

	  
 

			  

	  
#1 (Slim Crumb)

	  
 

				  

	  
#2 (Slim Crumb)

	  
 

							  

	  
#3 (Normal Crumb)

	  
 

									  

	  
#4 (Slim Crumb)

	  
 

													  

	  
#5 (Slim Crumb)

    

  


```

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](https://github.com/fiedl/slim_breadcrumb/blob/master/lib/assets/javascripts/slim_breadcrumb.js.coffee).

You also have to handle your **stylesheets** for the breadcrumb yourself. An [example stylesheet can be found here](https://github.com/fiedl/slim_breadcrumb/blob/master/test_app/app/assets/stylesheets/breadcrumb.css.sass). 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