Skip to main content
Brimham Rocks, Yorkshire, UK

Astro: How to create a dynamic list in an Astro component

This is a new website and is under active development. There will be some odd-looking layouts and colours while this is happening. Please bear with me and check back again to see any updates.
---
import siteInfo from '../site-info.json';
const pathname = new URL(Astro.request.url).pathname;
const pages = siteInfo.pages;
---
<nav class="nav-main">
<ul>
{pages.map(page => (
<li class={pathname === page.path ? "active" : ""}><a href={page.path}>{page.name}</a></li>
))}
<slot />
</ul>
</nav>