@undercoatcss/breadcrumb

    0.5.1 • Public • Published

    @undercoatcsss/breadcrumb

    Breadcrumb is a component of the Undercoat.css framework.

    Travis (.org) npm (scoped) WCAG 2.0 Level AA schema.org

    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:

    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.

    Install

    npm i @undercoatcss/breadcrumb

    DownloadsWeekly Downloads

    16

    Version

    0.5.1

    License

    GPL-3.0-or-later

    Unpacked Size

    43.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • lautsevich