Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/comfy/active_link_to
Rails view helper to manage "active" state of a link
https://github.com/comfy/active_link_to
navigation rails
Last synced: 6 days ago
JSON representation
Rails view helper to manage "active" state of a link
- Host: GitHub
- URL: https://github.com/comfy/active_link_to
- Owner: comfy
- License: mit
- Created: 2011-02-23T02:39:36.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2024-04-07T09:40:49.000Z (9 months ago)
- Last Synced: 2024-12-29T17:02:04.250Z (13 days ago)
- Topics: navigation, rails
- Language: Ruby
- Homepage:
- Size: 81.1 KB
- Stars: 844
- Watchers: 9
- Forks: 84
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ruby - active_link_to - View helper to manage "active" state of a link. (Navigation)
- awesome-rails-gem - active_link_to - active_link_to adds css 'active' class to your links. (View Helper / Omniauth)
README
# active_link_to
Creates a link tag of the given name using a URL created by the set of options. Please see documentation for [link_to](http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to), as `active_link_to` is basically a wrapper for it. This method accepts an optional :active parameter that dictates if the given link will have an extra css class attached that marks it as 'active'.
[](http://rubygems.org/gems/active_link_to)
[](http://rubygems.org/gems/active_link_to)
[](https://travis-ci.org/comfy/active_link_to)
[](https://gitter.im/comfy/comfortable-mexican-sofa)
## Install
When installing for Rails 3/4/5 applications add this to the Gemfile: `gem 'active_link_to'` and run `bundle install`.
For older Rails apps add `config.gem 'active_link_to'` in config/environment.rb and run `rake gems:install`. Or just checkout this repo into /vendor/plugins directory.
## Super Simple Example
Here's a link that will have a class attached if it happens to be rendered
on page with path `/users` or any child of that page, like `/users/123`
```ruby
active_link_to 'Users', '/users'
# => Users
```
This is exactly the same as:
```ruby
active_link_to 'Users', '/users', active: :inclusive
# => Users
```
## Active Options
Here's a list of available options that can be used as the `:active` value
```
* Boolean -> true | false
* Symbol -> :exclusive | :inclusive | :exact
* Regex -> /regex/
* Controller/Action Pair -> [[:controller], [:action_a, :action_b]]
* Controller/Specific Action Pair -> [controller: :action_a, controller_b: :action_b]
* Hash -> { param_a: 1, param_b: 2 }
```
## More Examples
Most of the functionality of `active_link_to` depends on the current
url. Specifically, `request.original_fullpath` value. We covered the basic example
already, so let's try something more fun.
We want to highlight a link that matches immediate url, but not the children
nodes. Most commonly used for 'home' links.
```ruby
# For URL: /users will be active
active_link_to 'Users', users_path, active: :exclusive
# => Users
```
```ruby
# But for URL: /users/123 it will not be active
active_link_to 'Users', users_path, active: :exclusive
# => Users
```
If we need to set link to be active based on some regular expression, we can do
that as well. Let's try to activate links urls of which begin with 'use':
```ruby
active_link_to 'Users', users_path, active: /^\/use/
```
If we need to set link to be active based on an exact match, for example on
filter made via a query string, we can do that as well:
```ruby
active_link_to 'Users', users_path(role_eq: 'admin'), active: :exact
```
What if we need to mark link active for all URLs that match a particular controller,
or action, or both? Or any number of those at the same time? Sure, why not:
```ruby
# For matching multiple controllers and actions:
active_link_to 'User Edit', edit_user_path(@user), active: [['people', 'news'], ['show', 'edit']]
# For matching specific controllers and actions:
active_link_to 'User Edit', edit_user_path(@user), active: [people: :show, news: :edit]
# for matching all actions under given controllers:
active_link_to 'User Edit', edit_user_path(@user), active: [['people', 'news'], []]
# for matching all controllers for a particular action
active_link_to 'User Edit', edit_user_path(@user), active: [[], ['edit']]
```
Sometimes it should be as easy as giving link true or false value:
```ruby
active_link_to 'Users', users_path, active: true
```
If we need to set link to be active based on `params`, we can do that as well:
```ruby
active_link_to 'Admin users', users_path(role_eq: 'admin'), active: { role_eq: 'admin' }
```
## More Options
You can specify active and inactive css classes for links:
```ruby
active_link_to 'Users', users_path, class_active: 'enabled'
# => Users
active_link_to 'News', news_path, class_inactive: 'disabled'
# => News
```
Sometimes you want to replace link tag with a span if it's active:
```ruby
active_link_to 'Users', users_path, active_disable: true
# => Users
```
If you are constructing navigation menu it might be helpful to wrap links in another tag, like `
```ruby
active_link_to 'Users', users_path, wrap_tag: :li
# =>
```
You can specify css classes for the `wrap_tag`:
```ruby
active_link_to 'Users', users_path, wrap_tag: :li, wrap_class: 'nav-item'
# =>
```
## Helper Methods
You may directly use methods that `active_link_to` relies on.
`is_active_link?` will return true or false based on the URL and value of the `:active` parameter:
```ruby
is_active_link?(users_path, :inclusive)
# => true
```
`active_link_to_class` will return the css class:
```
active_link_to_class(users_path, active: :inclusive)
# => 'active'
```
### Copyright
Copyright (c) 2009-18 Oleg Khabarov. See LICENSE for details.