@undercoatcss/breadcrumb

@undercoatcsss/breadcrumb

Breadcrumb is a component of the Undercoat.css framework.

CAUTION! IT'S UNDER HEAVY DEVELOPMENT CURRENTLY! DON'T USE IT IN PRODUCTION!

Description

Breadcrumb is a logically and functionally independent reusable page component (block), which represents a secondary navigation scheme that reveals the user's location in a website.

Installation

NPM

npm install @undercoatcss/breadcrumb

Usage

After installation, you can link or import the assets into your project:

CDN

<link rel="stylesheet" href="https://unpkg.com/@undercoatcss/breadcrumb@latest/dist/breadcrumb.min.css">

Webpack

import '@undercoatcss/breadcrumb/breadcrumb.css';

Settings

The component provides CSS custom property to change its defaults.

Property	Default value
--breadcrumb--separator	\2192

HTML markup

Without microdata

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ul class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Index</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">Category</a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" aria-current="page">Subategory</a>
    </li>
  </ul>
</nav>

With microdata

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ul class="breadcrumb__list" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <span itemprop="name">
        <a class="breadcrumb__link" href="#" itemtype="http://schema.org/Thing" itemprop="item">Index</a>
      </span>
      <meta itemprop="position" content="1">
    </li>
    <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <span itemprop="name">
        <a class="breadcrumb__link" href="#" itemtype="http://schema.org/Thing" itemprop="item">Category</a>
      </span>
      <meta itemprop="position" content="2">
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" aria-current="page">Subategory</a>
    </li>
  </ul>
</nav>

Browser support

Undercoat is compatible with 2 recent desktop versions of:

• Chrome
• Edge
• Firefox
• Opera
• Safari

and 2 recent mobile versions of:

• Chrome
• Safari

We support only recent browsers to keep the components codebase clean and provide high performance.

The .browserlist config is provided.

Key concepts

Undercoat is based on the next main principles:

• BEM methodology
• No default theme
• Mobile friendly
• SEO friendly
• WCAG 2.0 compliance

Contributing

If you're interested in the improvement of this project you can help in the following ways:

• bug reporting and new feature requesting by creating issues on plugin GitHub page;
• contribution to a project following these instructions.