Set a main menu

LightNet supports adding a main menu in the header bar, displayed as a hamburger icon in the top right corner.
The menu can link to internal or external pages.

Here’s an example configuration:

astro.config.mjs

export default defineConfig({
  integrations: [
    lightnet({
      // ...
      mainMenu: [
        {
          href: "/",
          label: "ln.home.title",
        },
        {
          href: "/media",
          label: "ln.search.title",
        },
        {
          href: "/about",
          label: "x.navigation.about",
        },
        {
          href: "https://lightnet.community",
          label: "LightNet",
        },
      ],
    }),
  ],
})

This example menu configuration links to:

• the home page on /
• the search page on /media
• the about page on /about
• an external website on https://lightnet.community

Notice how the links do not include a locale. The locale is automatically added by LightNet.

Menu item properties

• href: Defines the link destination. It can be internal (e.g., /media) or external links (e.g., https://wikipedia.org). External links open in a new browser tab.

  Note

  Do not add locales in front of your internal links (use /media and not /en/media). LightNet automatically adds the locales. You can disable this behavior by setting
  requiresLocale: false on the menu item.

• label: The text displayed on the menu item. Use a translation key for localized or a fixed string for non-localized labels.