README.md in gretel-4.2.0 vs README.md in gretel-4.3.0
- old
+ new
@@ -1,7 +1,7 @@
[![Gem Version](https://badge.fury.io/rb/gretel.svg)](http://badge.fury.io/rb/gretel)
-[![Build Status](https://travis-ci.org/kzkn/gretel.svg?branch=master)](https://travis-ci.org/kzkn/gretel)
+![](https://github.com/kzkn/gretel/workflows/CI/badge.svg)
<img src="http://i.imgur.com/CAKEaBM.png" alt="Handle breadcrumb trails... like a boss :)" />
([TL;DR](http://i.imgur.com/nH25yiH.png)) Gretel is a [Ruby on Rails](http://rubyonrails.org) plugin that makes it easy yet flexible to create breadcrumbs.
It is based around the idea that breadcrumbs are a concern of the view, so you define a set of breadcrumbs in *config/breadcrumbs.rb* (or multiple files; see below) and specify in the view which breadcrumb to use.
@@ -96,10 +96,11 @@
:current_class | CSS class for the current link or span. Can be set to `nil` for no class. | `"current"`
:pretext_class | CSS class for the pretext, if given. Can be set to `nil` for no class. | `"pretext"`
:posttext_class | CSS class for the posttext, if given. Can be set to `nil` for no class. | `"posttext"`
:container_tag | Tag type that contains the breadcrumbs. | `:div`
:fragment_tag | Tag type to contain each breadcrumb fragment/link. | None
+:aria_current | Value of `aria-current` attribute. | None
### Styles
These are the styles you can use with `breadcrumbs style: :xx`.
@@ -200,10 +201,15 @@
end
crumb :user do |user|
link user_name_for(user), user
end
+
+# I18n
+crumb :home do
+ link t("breadcrumbs.home"), root_path
+end
```
## Building the breadcrumbs manually
You can use the `breadcrumbs` method directly as an array. It will return an array with the breadcrumb links so you can build the breadcrumbs HTML manually:
@@ -222,19 +228,19 @@
If you use this approach, you lose the built-in semantic breadcrumb functionality. One way to
add them back is to use JSON-LD structured data:
```erb
<script type="application/ld+json">
- <%= breadcrumbs.structured_data(url_base: "https://example.com")) %>
+ <%= breadcrumbs.structured_data(url_base: "https://example.com") %>
</script>
```
Or, you can infer `url_base` from `request`:
```erb
<script type="application/ld+json">
- <%= breadcrumbs.structured_data(url_base: "#{request.protocol}#{request.host_with_port}")) %>
+ <%= breadcrumbs.structured_data(url_base: "#{request.protocol}#{request.host_with_port}") %>
</script>
```
## Getting the parent breadcrumb
@@ -305,9 +311,28 @@
link.other # => "My Other Option"
link.nonexisting_option? # => false
link.nonexisting_option # => nil
end
end
+```
+
+### ARIA support
+
+You can improve the accessibility of your page with the markup that specified in [ARIA](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html). Gretel supports generating `aria-current` attribute:
+
+```erb
+<% breadcrumb :issue, @issue %>
+<%= breadcrumbs aria_current: "page" %>
+```
+
+This will generate the following HTML (indented for readability):
+
+```html
+<div class="breadcrumbs">
+ <a href="/">Home</a> ›
+ <a href="/issues">All issues</a> ›
+ <span class="current" aria-current="page">My Issue</span>
+</div>
```
## Documentation
* [Full documentation](https://rubydoc.info/gems/gretel)