Breadcrumb Component
ReactJS
Medium
6 views
Problem Description
Build a breadcrumb component like Home > Topics > React.
Output Format
Render a React component.
Constraints
Use an ordered list for structure.
Official Solution
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>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!