1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Навигацияbreadcrumbsnavigationux

Minimal Breadcrumbs

Минималистичные хлебные крошки для понятной навигации по иерархии страниц.

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

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>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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; }

Краткая информация

Категория
Навигация
Имя файла
BreadcrumbsMinimal.tsx
Зависимости
Нет — чистый React + CSS
Теги
breadcrumbsnavigationux