Semantic Breadcrumbs
Semantic Breadcrumbs creates HTML markup for breadcrumbs. See the Google Developers article for more detail: https://developers.google.com/structured-data/breadcrumbs
The output format is RDFa.
Usage
require 'semantic-breadcrumbs'
@b = SemanticBreadcrumbs.new
breadcrumbs = @b.breadcrumbs(
[
{ href: 'https://example.com/arts',
name: 'Arts' },
{ href: 'https://example.com/arts/books',
name: 'Books' },
{ href: 'https://example.com/arts/books/poetry',
name: 'Poetry' }
]
)
puts breadcrumbs
# <ol vocab="http://schema.org/" typeof="BreadcrumbList">
# <li property="itemListElement" typeof="ListItem">
# <a property="item" typeof="WebPage"
# href="https://example.com/arts">
# <span property="name">Arts</span></a>
# <meta property="position" content="1">
# </li>
# ›
# <li property="itemListElement" typeof="ListItem">
# <a property="item" typeof="WebPage"
# href="https://example.com/arts/books">
# <span property="name">Books</span></a>
# <meta property="position" content="2">
# </li>
# ›
# <li property="itemListElement" typeof="ListItem">
# <a property="item" typeof="WebPage"
# href="https://example.com/arts/books/poetry">
# <span property="name">Poetry</span></a>
# <meta property="position" content="3">
# </li>
# </ol>
Styling
The generated markup has a single CSS class on the outer most wrapper:
<ol class='breadcrumbs'>
. We suggest to start with the following CSS
and adjust it to your needs:
.breadcrumbs li {
display: inline-block;
list-style-type: none;
}
Custom Divider
The divider is placed between the breadcrumbs as you can see in the example
above. The default is ›
.
You can override it when instantiating the SemanticBreadcrumbs
object:
SemanticBreadcrumbs.new(divider: '//')
Contributing
It would be nice to support some more formats in addition to RDFA.
- Fork the repository
- Create a feature branch:
git checkout -b your-feature
- Add your changes
- Push changes:
git push -u origin your-feature
- Submit a pull request
License
This project is licensed under the MIT license. See the LICENSE
file
for details.