Skip to content

Instantly share code, notes, and snippets.

@colepeters
Last active April 4, 2024 18:30
Show Gist options
  • Save colepeters/1ab7d8f0b6e18d2fa9a42acc496cfdcc to your computer and use it in GitHub Desktop.
Save colepeters/1ab7d8f0b6e18d2fa9a42acc496cfdcc to your computer and use it in GitHub Desktop.
Quick example of building a single Breadcrumbs component which takes it data from the store and returns accessible, valid markup
// app/elements/enhance-breadcrumbs.mjs
export default function EnhanceBreadcrumbs ({ html, state }) {
const { store } = state
const { breadcrumbs } = store
const items = breadcrumbs.map(b => `
<li>
<a href="${b.href}">
${b.label}
</a>
</li>`).join('')
return html`
<style>
nav { /* nav styles */ }
ol { /* list styles */ }
li { /* list item styles */ }
a { /* link styles */ }
</style>
<nav>
<ol>
${items}
</ol>
</nav>
`
}
<enhance-breadcrumbs></enhance-breadcrumbs>
<!-- rest of the page -->
// app/api/index.mjs
export async function get () {
return {
json: {
breadcrumbs: [
{ url: '/', label: 'Home' },
{ url: '/about', label: 'About' },
{ url: '/about/the-team', label: 'The Team' },
]
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment