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> &rsaquo; + <a href="/issues">All issues</a> &rsaquo; + <span class="current" aria-current="page">My Issue</span> +</div> ``` ## Documentation * [Full documentation](https://rubydoc.info/gems/gretel)