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
-
Add middleman-aria_current to your
Gemfile
:gem "middleman-aria_current"
-
Install the gem:
bundle install
-
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
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.