Set a main menu

LightNet supports adding a main menu to 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: {
            en: "Home",
          },
        },
        {
          href: "/media",
          label: {
            en: "Media",
          },
        },
        {
          href: "/about",
          label: {
            en: "About",
          },
        },
        {
          href: "https://lightnet.community",
          label: {
            en: "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 that the links do not include a locale. LightNet adds the locale automatically.

Menu item properties

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

  Note

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

• label: The text displayed on the menu item. Provide a locale map keyed by your configured site languages, for example { en: "About", de: "Über uns" }.