import React from 'react'; export function Breadcrumb({ items }) { return ( <nav aria-label='Breadcrumb'> <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', gap: 8, alignItems: 'center' }}> {items.map((it, idx) => ( <li key={it.label} style={{ display: 'flex', gap: 8, alignItems: 'center' }}> <a href={it.href} style={{ color: '#0a58ca', textDecoration: 'none' }}>{it.label}</a> {idx < items.length - 1 ? <span aria-hidden='true'>›</span> : null} </li> ))} </ol> </nav> ); } export default function App() { return ( <div style={{ padding: 16 }}> <Breadcrumb items={[{ label: 'Home', href: '#' }, { label: 'Topics', href: '#' }, { label: 'React', href: '#' }]} /> </div> ); }