Links & breadcrumb

Overview

.link styles standalone action links (pill padding, hover surface). Add .link--inline inside body copy for underlined text links. .breadcrumb wraps an <ol class="breadcrumb__list">: each ancestor is a .breadcrumb__link followed by a .breadcrumb__separator chevron.

Prerequisites

• PimentCSS installed, Installation.
• Icons, optional link__icon slot with your library (this doc uses Phosphor via ph()).
• Typography, inline links sit in Typography body utilities (.body-medium).

Link states

Each state is an <a href="…"> except disabled (non-focusable <span>). Doc-only .link--hover shows the spec surface; live pages use :hover and :focus-visible. The default cell shows optional link-04 and an outbound trail icon.

Structure

Use a real href on anchors. For disabled links, prefer removing the anchor or use aria-disabled="true" with tabindex="-1" on a span styled as .link--disabled.

<a href="/docs/colors" class="link"><span class="link__label">View colors</span></a>

Inline link

Inside paragraphs, add .link--inline for underline and the same action color tokens.

Link with icons

Optional pattern: link-04 before the label, outbound arrow after (16px). Use when the design calls for both link affordance and an external destination cue.

The trail arrow uses an inline SVG (ICON.linkForwardTrail()) for a clearer external-link cue at 16px.

Breadcrumb

Each ancestor is a .breadcrumb__link ending with .breadcrumb__separator. The last item is .breadcrumb__current with aria-current="page".

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item"><a href="/docs" class="breadcrumb__link">
        <span>Home</span>
        <i class="ph ph-caret-right breadcrumb__separator" style="font-size:20px" aria-hidden="true"></i>
      </a></li>
    <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">Current page</span></li>
  </ol>
</nav>

Class reference

Customize (Sass)

1. 01

   Link and breadcrumb spacing

   Override gap, padding, and icon size before importing components.
   variables

   @use "pimentcss-design-system" with (
     $link-gap: 0.5rem,
     $link-padding: 0.25rem,
     $link-icon-size: 1.25rem,
     $breadcrumb-gap: 0.25rem
   );

2. 02

   Rebuild CSS

   Run after editing _link.scss or _breadcrumb.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps