1 GitHub star = 1 new component.

Star the repo
Navigationbreadcrumbsnavigationux

Minimal Breadcrumbs

Minimal breadcrumb trail with subtle separators.

Usage

Copy and paste this code into your React component:

tsx
import { BreadcrumbsMinimal } from 'react-component-kit-ui/navigation';

<BreadcrumbsMinimal>
  <a href="/">Home</a>
  <span className="sep">/</span>
  <a href="/docs">Documentation</a>
  <span className="sep">/</span>
  <span className="curr">Navigation</span>
</BreadcrumbsMinimal>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/BreadcrumbsMinimal.tsx + BreadcrumbsMinimal.css:

BreadcrumbsMinimal.tsx
'use client';

import './BreadcrumbsMinimal.css';

/** BreadcrumbsMinimal โ€” ported from astro-component-kit. */
export interface BreadcrumbsMinimalProps {
}

export function BreadcrumbsMinimal({}: BreadcrumbsMinimalProps) {
  return (
    <>
      <nav className="crumbs" data-rk-a2645c="">
        <a href="/" data-rk-a2645c="">Home</a>
        <span className="sep" data-rk-a2645c="">/</span>
        <a href="/docs" data-rk-a2645c="">Documentation</a>
        <span className="sep" data-rk-a2645c="">/</span>
        <span className="curr" data-rk-a2645c="">Navigation</span>
      </nav>
    </>
  );
}

export default BreadcrumbsMinimal;
BreadcrumbsMinimal.css
/* BreadcrumbsMinimal โ€” ported from astro-component-kit (navigation/BreadcrumbsMinimal.astro) */

.crumbs:where([data-rk-a2645c]) { display: flex; gap: 0.6rem; font-size: 0.8rem; font-weight: 500; }
.crumbs:where([data-rk-a2645c]) a:where([data-rk-a2645c]) { color: #64748b; text-decoration: none; }
.crumbs:where([data-rk-a2645c]) a:hover:where([data-rk-a2645c]) { color: #fff; }
.sep:where([data-rk-a2645c]) { color: #334155; }
.curr:where([data-rk-a2645c]) { color: #818cf8; font-weight: 700; }

Quick Info

Category
Navigation
Filename
BreadcrumbsMinimal.tsx
Dependencies
None โ€” pure React + CSS
Tags
breadcrumbsnavigationux