#How can I create a navbar based on folders & files in /pages directory?

1 messages · Page 1 of 1 (latest)

glacial nebula
#

Starlight builds navigation from the pages directory, how can I replicate this in my own Astro project?

frail gyroBOT
#

Hi @glacial nebula. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Astro, you can create a navigation bar (navbar) based on the structure of your /pages directory. Here's a step-by-step guide on how you can achieve this:

  1. Create a new src/components/ folder: This folder will hold .astro files that will generate HTML but will not become new pages on your website.

  2. Create a Navigation component: Create a new file: src/components/Navigation.astro. Copy your links to navigate between pages from the top of any page and paste them into your new file, Navigation.astro.

<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
  1. Import and use Navigation.astro: Go back to index.astro and import your new component inside the code fence:
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

const pageTitle = "Home Page";

Then replace the existing navigation HTML link elements with the new navigation component you just imported:

<Navigation />

This will replace the existing navigation HTML link elements with the new navigation component you just imported. Your site should look exactly the same, but now, those lines of code are provided by your <Navigation /> component.

For more details, you can refer to the Astro tutorial on creating a reusable Navigation component (https://docs.astro.build/en/tutorial/3-components/1/#_top).

However, if you want to automatically generate a navbar based on the filesystem structure of your documentation, similar to how Starlight does it, you would need to implement your own logic to read the file structure and generate the corresponding links. Astro does not provide this functionality out of the box.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: