Navigasi & Struktur
Breadcrumb (Navigasi Jejak Rekam)
Rantai tautan navigasi hierarki untuk membantu warga memahami posisi halaman saat ini dalam portal.
Breadcrumb (.mjl-breadcrumb) menampilkan struktur navigasi dari tingkat beranda hingga halaman yang sedang aktif.
1. Pratinjau Breadcrumb
Pratinjau Breadcrumb
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<nav aria-label="Jejak navigasi">
<ol class="mjl-breadcrumb">
<li><a href="/">Beranda</a></li>
<li><a href="/layanan">Layanan Publik</a></li>
<li aria-current="page">KTP Elektronik</li>
</ol>
</nav>
<script setup lang="ts">
import { MjlBreadcrumb } from '@majalengka/vue';
const jejak = [
{ label: 'Beranda', href: '/' },
{ label: 'Layanan Publik', href: '/layanan' },
{ label: 'KTP Elektronik' },
];
</script>
<template>
<MjlBreadcrumb :items="jejak" />
</template>
export function MjlBreadcrumb({ items }: { items: { label: string; href?: string }[] }) {
return (
<nav aria-label="Jejak navigasi">
<ol className="mjl-breadcrumb">
{items.map((item, i) =>
i < items.length - 1 && item.href
? <li key={item.label}><a href={item.href}>{item.label}</a></li>
: <li key={item.label} aria-current="page">{item.label}</li>,
)}
</ol>
</nav>
);
}
import { Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'mjl-breadcrumb',
standalone: true,
imports: [RouterLink],
template: `
<nav aria-label="Jejak navigasi">
<ol class="mjl-breadcrumb">
@for (item of items(); track item.label; let last = $last) {
@if (!last && item.link) {
<li><a [routerLink]="item.link">{{ item.label }}</a></li>
} @else {
<li aria-current="page">{{ item.label }}</li>
}
}
</ol>
</nav>
`,
})
export class MjlBreadcrumb {
items = input.required<{ label: string; link?: string }[]>();
}
{{-- resources/views/components/mjl/breadcrumb.blade.php --}}
@props(['items'])
<nav aria-label="Jejak navigasi">
<ol class="mjl-breadcrumb">
@foreach ($items as $label => $url)
@if ($loop->last)
<li aria-current="page">{{ $label }}</li>
@else
<li><a href="{{ $url }}">{{ $label }}</a></li>
@endif
@endforeach
</ol>
</nav>
{{-- Pemakaian --}}
<x-mjl.breadcrumb :items="['Beranda' => route('home'), 'Layanan Publik' => route('layanan.index'), 'KTP Elektronik' => null]" />
<?php $jejak = ['Beranda' => '/', 'Layanan Publik' => '/layanan', 'KTP Elektronik' => null]; ?>
<nav aria-label="Jejak navigasi">
<ol class="mjl-breadcrumb">
<?php foreach ($jejak as $label => $url): ?>
<?php if ($url === null): ?>
<li aria-current="page"><?= htmlspecialchars($label) ?></li>
<?php else: ?>
<li><a href="<?= htmlspecialchars($url) ?>"><?= htmlspecialchars($label) ?></a></li>
<?php endif; ?>
<?php endforeach; ?>
</ol>
</nav>