46 lines
1,020 B
TypeScript
46 lines
1,020 B
TypeScript
import { html, css, LitElement } from 'lit';
|
|
import { property, customElement } from 'lit/decorators.js';
|
|
import './BreadcrumbsItem';
|
|
|
|
@customElement('arx-breadcrumbs')
|
|
export class Breadcrumbs extends LitElement {
|
|
@property({ type: Array }) items: { text: string; href?: string }[] = [];
|
|
|
|
static override styles = [
|
|
css`
|
|
nav {
|
|
max-width: 1200px;
|
|
margin: 1rem auto;
|
|
padding-inline: 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
ol {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
`,
|
|
];
|
|
|
|
override render() {
|
|
return html`
|
|
<nav aria-label="Breadcrumb">
|
|
<ol>
|
|
${this.items.map(
|
|
(item, index) => html`
|
|
<arx-breadcrumbs-item
|
|
.text=${item.text}
|
|
.href=${item.href}
|
|
.index=${index}
|
|
></arx-breadcrumbs-item>
|
|
`,
|
|
)}
|
|
</ol>
|
|
</nav>
|
|
`;
|
|
}
|
|
}
|