Breadcrumb

Alat navigasi yang membantu pengguna memahami lokasi semasa mereka dalam laman web atau aplikasi dan membolehkan mereka dengan mudah kembali ke tahap sebelumnya.

Source Storybook

Penggunaan

Import

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
} from "@govtechmy/myds-react/breadcrumb";

Anatomi

export default () => (
  <Breadcrumb>
    <BreadcrumbItem>
      <BreadcrumbLink />
      <BreadcrumbPage />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
  </Breadcrumb>
);

Contoh

Varian

Gunakan prop variant untuk menukar gaya breadcrumb!

Pautan vs Halaman

BreadcrumbLink digunakan untuk halaman induk, manakala BreadcrumbPage digunakan untuk halaman semasa. Halaman semasa biasanya tidak boleh diklik.

Serpihan Ellipsis

Serpihan yang terlalu panjang akan dipendekkan dengan elipsis. Had lebar maksimum ialah 200px. Pengguna boleh melayang di atas serpihan untuk melihat teks penuh.

Props

Prop	Type	Default
`variant`	`enum`	`default`

MYDS