No commit activity in last 3 years
No release in over 3 years
middleman-aria_current provides a `current_link_to` helper, which wraps the built-in `link_to` helper. It checks the URL of the current visited page and outputs an `aria-current` attribute if it matches the URL in the link.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 2.13
~> 2.4
~> 12.0
~> 3.5

Runtime

 Project Readme

middleman-aria_current

A Middleman extension for indicating a current (active) link using aria-current.

If you're new to aria-current, Léonie Watson wrote a wonderful article detailing its usage.

Installation

  1. Add middleman-aria_current to your Gemfile:

    gem "middleman-aria_current"
  2. Install the gem:

    bundle install
  3. Activate the extension in config.rb:

    activate :aria_current

Usage

middleman-aria_current provides a current_link_to helper, which wraps the built-in link_to helper. It checks the URL of the current visited page and outputs an aria-current attribute if it matches the URL in the link.

As an example, below is a typical website navigation where we use current_link_to for each link (using ERB):

<nav>
  <%= current_link_to "Home", "/" %>
  <%= current_link_to "About", "/about" %>
</nav>

Now, when you visit /about, the link for that page will be given the aria-current attribute:

<nav>
  <a href="/">Home</a>
  <a href="/about" aria-current="page">About</a>
</nav>

By default, current_link_to will output the page value for aria-current. You can also pass it one of aria-current’s other accepted values: step, location, date, time, true, or false:

<%= current_link_to "Step 1", "/step-1", aria_current: "step" %>
<%= current_link_to "Step 2", "/step-2", aria_current: "step" %>
<%= current_link_to "Step 3", "/step-3", aria_current: "step" %>

Provided that you are currently visiting /step-2, the output will be:

<a href="/step-1">Step 1</a>
<a href="/step-2" aria-current="step">Step 2</a>
<a href="/step-3">Step 3</a>

For styling current links, you can use a CSS attribute selector:

[aria-current]:not([aria-current="false"]) {
  font-weight: bold;
}

Note that we exclude styling the link if aria-current has a value of false. This is because false is a valid and useful value for denoting a link that does not represent the current item within a set.

Contributing

See the contributing document. Thank you, contributors!

License

middleman-aria_current is copyright © 2017 Tyson Gach and thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.

About

thoughtbot

middleman-aria_current is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to help build your product.