ബ്രെഡ്‌ക്രമ്പ്

ഇൻസ്റ്റലേഷൻ

npx gbs-add-block@latest -a Breadcrumb -beta

എല്ലാ കമ്പോണന്റുകളും ഇംപോർട്ട് ചെയ്യുന്ന ചെറിയ shared ഫോൾഡറിനൊപ്പം, breadcrumb ഫോൾഡർ ഈ ബ്ലോക്ക് നിങ്ങളുടെ പ്രോജക്ടിലേക്ക് കോപ്പി ചെയ്യുന്നു. കോഡ് നിങ്ങളുടേതാണ്, സ്വതന്ത്രമായി മാറ്റം വരുത്താം. React അല്ലാതെ peer dependencies ഒന്നും ഇല്ല.

ആവശ്യകതകൾ

• React 19-ഉം @types/react 19-ഉം
• TypeScript ടാർഗെറ്റ് ES2022 അല്ലെങ്കിൽ അതിനു ശേഷമുള്ളത്, "jsx": "react-jsx" എന്നതോടെ
• 2024-നു ശേഷമുള്ള ബ്രൗസറുകൾ (സ്റ്റൈലുകൾ light-dark(), :dir() ഉപയോഗിക്കുന്നു)

സ്റ്റൈൽഷീറ്റ് ഒരു തവണ ഇംപോർട്ട് ചെയ്യുക, ഉദാഹരണത്തിന് നിങ്ങളുടെ ഗ്ലോബൽ CSS-ൽ:

@import "../components/breadcrumb/styles.css";

അല്ലെങ്കിൽ നിങ്ങളുടെ റൂട്ട് ലേഔട്ട് / എൻട്രി ഫയലിൽ:

import "@/components/breadcrumb/styles.css";

നിലവിലെ പേജ് നിങ്ങളുടെ ആപ്പിന്റെ ശ്രേണിയിൽ (hierarchy) എവിടെയാണ് നിൽക്കുന്നത് എന്ന് ബ്രെഡ്‌ക്രമ്പ് കാണിക്കുന്നു, കൂടാതെ ഒറ്റ ക്ലിക്കിൽ മുകളിലേക്ക് പോകാൻ ആളുകളെ അനുവദിക്കുന്നു. നീണ്ട ട്രെയിലുകൾ അവയുടെ അറ്റങ്ങളിൽ ഒരു എലിപ്സിസിന് (ellipsis) പിന്നിൽ ചുരുങ്ങുന്നു. next/link പോലുള്ള നിങ്ങളുടെ റൗട്ടറിന്റെ ലിങ്ക് കമ്പോണന്റ് ഉപയോഗിച്ച് ലിങ്കുകൾ വരയ്ക്കാം. തിരയൽ എഞ്ചിനുകൾക്ക് ഫലങ്ങളിൽ ട്രെയിൽ കാണിക്കാൻ കഴിയുന്ന വിധം, ട്രെയിൽ ഘടനാപരമായ ഡാറ്റയായും (structured data) പ്രസിദ്ധീകരിക്കാം.

ഡിഫോൾട്ട്

ക്വിക്ക് സ്റ്റാർട്ട്

"use client";
 
import Link from "next/link";
import { Breadcrumb } from "@/components/breadcrumb";
 
export function InvoiceHeader({ invoice }) {
  return (
    <Breadcrumb
      items={[
        { label: "Home", href: "/" },
        { label: "Invoices", href: "/invoices" },
        { label: invoice.number },
      ]}
      renderLink={(props) => <Link {...props} />}
    />
  );
}

ഐറ്റങ്ങൾ ഏറ്റവും മുകളിലെ ലെവൽ മുതൽ താഴേക്കാണ് പോകുന്നത്. അവസാനത്തെ ഐറ്റം നിലവിലെ പേജാണ്: അത് ഒരു ലിങ്കല്ല, കൂടാതെ aria-current="page" എന്ന് അടയാളപ്പെടുത്തിയിരിക്കുന്നു.

പ്രോപ്സ് ടേബിൾ

എല്ലാ <nav> ആട്രിബ്യൂട്ടുകളും, കൂടാതെ:

BreadcrumbItem

നീണ്ട ട്രെയിലുകൾ ചുരുക്കുന്നത്

<Breadcrumb
  items={trail}
  maxItems={4}
  itemsBeforeCollapse={1}
  itemsAfterCollapse={2}
/>

7 ക്രമ്പുകളുള്ള ഒരു ട്രെയിൽ Home › … › Invoices › INV-042 ആയി മാറുന്നു. എലിപ്സിസിൽ അമർത്തുന്നത് മുഴുവൻ ട്രെയിലും വെളിപ്പെടുത്തുകയും, മറച്ചുവെച്ച ആദ്യത്തെ ക്രമ്പിലേക്ക് കീബോർഡ് ഫോക്കസ് നീക്കുകയും ചെയ്യുന്നു. maxItems എണ്ണത്തിനോ അതിൽ കുറവോ ക്രമ്പുകൾ ഉള്ള ട്രെയിലുകൾ ഒരിക്കലും ചുരുക്കപ്പെടുന്നില്ല.

റൗട്ടർ ലിങ്കുകൾ

renderLink-ന് href, className, children, onClick എന്നിവ ലഭിക്കുന്നു. ഇവ നിങ്ങളുടെ ലിങ്കിൽ സ്പ്രെഡ് ചെയ്യുക:

import Link from "next/link";
 
<Breadcrumb
  items={items}
  renderLink={(props) => <Link {...props} prefetch={false} />}
/>;

// React Router
import { Link } from "react-router";
 
<Breadcrumb
  items={items}
  renderLink={({ href, ...props }) => <Link to={href} {...props} />}
/>;

ഘടനാപരമായ ഡാറ്റ (Structured Data)

<Breadcrumb
  items={items}
  structuredData={{ baseUrl: "https://app.example.com" }}
/>

ഇത് schema.org BreadcrumbList ഉള്ള ഒരു <script type="application/ld+json"> ചേർക്കുന്നു. ഫലങ്ങളിൽ പേജ് ടൈറ്റിലിനു താഴെ ട്രെയിൽ കാണിക്കാൻ തിരയൽ എഞ്ചിനുകൾക്ക് ഇത് ഉപയോഗിക്കാം. ആപേക്ഷിക (relative) href-കൾ baseUrl-നെതിരെ റിസോൾവ് ചെയ്യപ്പെടുന്നു, കാരണം തിരയൽ എഞ്ചിനുകൾ പൂർണ്ണമായ URL-കൾ പ്രതീക്ഷിക്കുന്നു. ബ്രെഡ്‌ക്രമ്പ് സെർവറിൽ റെൻഡർ ചെയ്യുക, ഒരു Next.js പേജ് ചെയ്യുന്നതുപോലെ, അപ്പോൾ ക്രാളറുകൾക്ക് HTML-ൽ ഡാറ്റ കാണാൻ കഴിയും.

കീബോർഡ്

ആക്സസിബിലിറ്റി: ട്രെയിൽ "Breadcrumb" എന്ന് പേരുള്ള ഒരു <nav> ലാൻഡ്മാർക്ക് ആണ്, ഇതിൽ ഒരു ഓർഡേർഡ് ലിസ്റ്റ് ഉൾപ്പെടുന്നു. സെപ്പറേറ്ററുകൾ aria-hidden ആണ്, അതിനാൽ ക്രമ്പുകൾക്കിടയിൽ സ്ക്രീൻ റീഡറുകൾ "ഷെവ്റോൺ" വായിക്കുന്നില്ല. നിലവിലെ പേജിന് aria-current="page" ഉണ്ട്, കൂടാതെ എലിപ്സിസ് അത് എത്ര ക്രമ്പുകൾ വെളിപ്പെടുത്തുന്നു എന്ന് പറയുന്നു ("Show 4 more").

സ്റ്റൈലിംഗും തീമിംഗും

എല്ലാ റൂളുകളും CSS components ലെയറിലാണ്, അതിനാൽ className / classNames വഴി കടന്നുപോകുന്ന യൂട്ടിലിറ്റി ക്ലാസുകൾ അവയെ ഓവർറൈഡ് ചെയ്യുന്നു.

<Breadcrumb
  classNames={{ current: "text-blue-600", separator: "opacity-40" }}
/>

CSS വേരിയബിളുകൾ

.bc-root-ലോ, :root-ലോ, അല്ലെങ്കിൽ style-ലൂടെയോ ഇവ ഓവർറൈഡ് ചെയ്യുക. ഓരോ വേരിയബിളും അതേ പേരിലുള്ള ഷെയേർഡ് --gbs-*-ലേക്ക് ഫാൾബാക്ക് ചെയ്യുന്നു, പിന്നീട് ആ സ്റ്റൈൽഷീറ്റ് ലോഡ് ചെയ്തിട്ടുണ്ടെങ്കിൽ DataGrid-ന്റെ --dg-*-ലേക്കും, അവസാനം ബിൽറ്റ്-ഇൻ പാലറ്റിലേക്കും.

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ

ലോക്കൽ ടെക്സ്റ്റ്

<Breadcrumb
  localeText={{
    label: "Brotkrumen",
    showMore: (count) => `${count} weitere anzeigen`,
  }}
/>

ഹെഡ്‌ലെസ് ഉപയോഗം

Next.js

ബ്രെഡ്‌ക്രമ്പ് ഒരു ക്ലയന്റ് കമ്പോണന്റ് ആണ്, അതിന്റെ ഫയലിന്റെ മുകളിൽ "use client" ഉള്ളത്, കൂടാതെ ഘടനാപരമായ ഡാറ്റ ഉൾപ്പെടെ അത് പൂർണ്ണമായി സെർവറിൽ റെൻഡർ ചെയ്യുന്നു.

ഒരു സെർവർ കമ്പോണന്റിന് ഇത് പ്ലെയിൻ items (ലേബലുകൾ, href-കൾ, ഐക്കണുകൾ) ഉപയോഗിച്ച് നേരിട്ട് റെൻഡർ ചെയ്യാം. renderLink-ഉം onClick-ഉം ഫംഗ്ഷനുകളാണ്, ഒരു സെർവർ കമ്പോണന്റിൽ നിന്ന് ഒരു ക്ലയന്റ് കമ്പോണന്റിലേക്ക് ഫംഗ്ഷനുകൾ കൈമാറാൻ കഴിയില്ല. അവയെ പകരം ഒരു ചെറിയ ക്ലയന്റ് റാപ്പറിൽ ഇടുക, കൂടാതെ പേജിൽ നിന്ന് ഐറ്റങ്ങൾ അതിലേക്ക് കൈമാറുക:

// app/components/AppBreadcrumb.tsx
"use client";
 
import Link from "next/link";
import { Breadcrumb, type BreadcrumbItem } from "@/components/breadcrumb";
 
export function AppBreadcrumb({ items }: { items: BreadcrumbItem[] }) {
  return (
    <Breadcrumb items={items} renderLink={(props) => <Link {...props} />} />
  );
}

കുറിപ്പുകൾ

• വലത്തുനിന്ന്-ഇടത്തോട്ടുള്ള (right-to-left) ലേഔട്ടുകളിൽ, ഷെവ്റോൺ സെപ്പറേറ്റർ സ്വയമേവ മറുവശത്തേക്ക് ചൂണ്ടുന്നു.
• മുമ്പൊരു ബ്രെഡ്‌ക്രമ്പ് കമ്പോണന്റ് ഇല്ലാത്തതിനാൽ, മൈഗ്രേറ്റ് ചെയ്യാൻ ഒന്നുമില്ല.