Menu

---
import site from '@src/site.js';
import MenuLink from '@components/MenuLink.astro';

interface Props {
	name?: string;
}

const { name = 'main' } = Astro.props;
const menu = site.menus[name];
---

<nav class="hidden md:block">
	<ul class="flex gap-6">
		{
			menu.map((link, key) => {
				return (
					<MenuLink
						key={key}
						url={link.href}
						label={link.label}
						children={link?.children}
					/>
				);
			})
		}
	</ul>
</nav>

This component is available with our Astro Starter Kit.

Usage

Before you use this component, be sure that you’ve added the menu to src/site.js in the following format:

export default {
	...otherConfig,

	/**
	 * Menus
	 */
	menus: {
		main: [
			{
				label: 'Home',
				href: '/',
			},
			{
				label: 'About',
				href: '/about',
			},
			{
				label: 'Contact',
				href: '/contact',
			},
		],
	}
};

If you don’t specify a menu name, the component will look for a menu named main. Now you can import the component into the page or component you need it and use it!

---
import Menu from '@components/Menu.astro';
---
<Menu />

Props

• name - The name of the menu to display. Defaults to main.