How to add additional pages to menu?

[danielrosehill]

Hey!

Is there any chance there could be some documentation on how to add additional menus into the header menu for fellow Astro newbies?

Creating the extra page is easy but I didn't have luck hand-coding the addition in the theme config.

Many thanks if you can find the time. Beautiful theme!

[maheshrijal]

Hey! To add a new page you would need to create a new layout for your page in the layout folder. As an example if you want to add a notes page, you would create a file NotesLayout.astro in the layouts folder.

---
import { SITE } from "@config";
import Breadcrumbs from "@components/Breadcrumbs.astro";
import Footer from "@components/Footer.astro";
import Header from "@components/Header.astro";
import Layout from "./Layout.astro";

export interface Props {
  frontmatter: {
    title: string;
    description?: string;
  };
}

const { frontmatter } = Astro.props;
---

<Layout title={`${frontmatter.title} | ${SITE.title}`}>
  <Header activeNav="notes" />
  <Breadcrumbs />
  <main id="main-content">
    <section id="notes" class="prose mb-28 max-w-3xl prose-img:border-0">
      <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
      <slot />
    </section>
  </main>
  <Footer />
</Layout>

Then, you will create a notes.md page in the page folder with the frontmatter.

---
layout: ../layouts/NotesLayout.astro
title: "Notes"
---

Then, you need to add your page to the header in Header.astro export config.
Eg:
export interface Props { activeNav?: "posts" | "tags" | "about" | "notes"| "search"; }

Finally, you add a link to the header in the same file.

<li>
            <a href="/notes/" class={activeNav === "notes" ? "active" : ""}>
              Notes
            </a>
</li>

[satnaing]

Hello @maheshrijal,

I’ve converted the issue into a discussion and marked your reply as the answer.
As a result, I’ve deleted the separate discussion you opened.
Thanks for helping to answer questions!"