Verndale UI Components

N-DYN-1: Breadcrumbs 

<nav aria-label="Breadcrumbs" class="breadcrumbs" style="--separator: '//';">
    <ol>
        <li>
            <a href="#">First Page</a>
        </li>
        <li>
            <a href="#">Second Page</a>
        </li>
        <li>
            <a href="#">Third Page</a>
        </li>
        <li>
            <a aria-current="page">Current Page</a>
        </li>
    </ol>
</nav>
 
{{#*inline "crumb"}}
  <a href="#">{{title}}</a>
{{/inline}}

<nav aria-label="Breadcrumbs" class="breadcrumbs" style="--separator: '//';">
  <ol>
    {{#json crumbs}}
      {{#each this}}
         <li>
        {{#unless @last}}
          {{> crumb}}
        {{else}}
          <a aria-current="page" >{{title}}</a>
        {{/unless}}
        </li>
      {{/each}}
    {{/json}}
  </ol>
</nav>
 
{
  "separator": "//",
  "crumbs": [
    {
      "title": "First Page"
    },
    {
      "title": "Second Page"
    },
    {
      "title": "Third Page"
    },
    {
      "title": "Current Page"
    }
  ]
}
  • Content: 
    @import '../theme', 'variables';

.breadcrumbs {
  color: $brd-primary-link-color;
  font-family: $brd-font-family;
  font-size: $brd-font-size;

  @include mq($until: tablet) {
    display: none;
  }

  > ol {
    display: flex;
    margin-bottom: $brd-margin-bottom;
    margin-top: $brd-margin-top;
  }

  li {
    a {
      color: inherit;
      text-decoration: none;
    }

    &:hover:not(:last-of-type) {
      color: $brd-primary-link-color-hover;
      text-decoration: underline;
    }

    [aria-current='page'] {
      text-decoration: none;
      color: $brd-current-page-color;
    }

    + li::before {
      color: $brd-separator-color;
      display: inline-block;
      margin: 0 $brd-separator-spacing;
      content: var(--separator);
    }
  }
}
  • URL: /components/raw/n-dyn-1-breadcrumbs/_styles.scss
  • Filesystem Path: src/components/N-DYN-1-breadcrumbs/_styles.scss
  • Size: 768 Bytes
  • Content: 
    // Colors
$brd-primary-link-color: map-get($theme-colors, "primary") !default;
$brd-primary-link-color-hover: map-get($theme-colors, "primary-dark") !default;
$brd-current-page-color: #000 !default;
$brd-separator-color: #CCC !default;

// Spacing
$brd-margin-top: 10px !default;
$brd-margin-bottom: 20px !default;
$brd-separator-spacing: 5px !default;

// Fonts
$brd-font-size: 12px !default;
$brd-font-family: $primary-font !default;
  • URL: /components/raw/n-dyn-1-breadcrumbs/_variables.scss
  • Filesystem Path: src/components/N-DYN-1-breadcrumbs/_variables.scss
  • Size: 436 Bytes
  • Handle: @n-dyn-1-breadcrumbs
  • Preview:
  • Filesystem Path: src/components/N-DYN-1-breadcrumbs/N-DYN-1-breadcrumbs.hbs

Breadcrumbs

This component renders a delimited list of links and a final optional link.

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

Import the style to your main style file in your project

@import "../../node_modules/@verndale/front-end-components/lib/breadcrumbs/styles";

Copy and paste to your project any of the markup in the button variations - you can find the markup in the HTML tab.

Styling

The component will already have a default style/theme set, so it will work out of the box. It is recommended to use the overrides if you can as it will be less code in your project.

Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss

// Colors
$brd-primary-link-color
$brd-primary-link-color-hover
$brd-current-page-color
$brd-separator-color

// Spacing
$brd-margin-top
$brd-margin-bottom
$brd-separator-spacing

// Fonts
$brd-font-size
$brd-font-family

You always need to set your overrides before the import of you component - for example:

$brd-primary-link-color: #808080;
$brd-primary-link-color-hover: #101010;

@import "../../node_modules/@verndale/front-end-components/lib/breadcrumbs/styles";