> For the complete documentation index, see [llms.txt](https://docs.webgeoda.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webgeoda.org/pages/adding-and-customizing-pages.md).

# Adding and Customizing Pages

Static pages are extremely useful to contextualize the data presented in your WebGeoDa dashboard. For example, you could include documentation on your data sources, potential limitations, citations, and a data download. Or add a form for users to report data issues and suggestions!

## Starting a New Page

At its core, here's all you need for a page:

```javascript
// pages/myPage.js
import Head from 'next/head'

export default function MyPage() {
    return (
        <div>
            <Head>
                <title>My Page:: WebGeoDa Scaffolding</title>
                <meta name="description" content="A Really Good Page." />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            Ahoy, Globe!
        </div>
    )
}
```

Each page script starts with any imports, here we're importing the `<Head>` component from `next/head`. Then, your main function for that page, denoted with `export default`. You can have any additional logic you need for the page in this function and any additional helper functions outside the function as well.

The `return` statement has the bulk of what we're looking for here. Instead of writing traditional HTML, [Next.js](/pages/adding-and-customizing-pages.md) and React use a mash of HTML and XML called [JSX](/pages/adding-and-customizing-pages.md). It can interpret traditional HTML elements, such as `div`, but also supports custom elements and components. In the example above the `<Head>` component we imported allows us to modify the meta information on the page, like the title, description, favicon, and so on. Past that head

## Updating the Nav Bar

Add or remove `<MenuLink>` elements in the navbar, found in `components/layout/MainNav.js`. Each of these represents a link in the navigation menu, and the `href` property leads to the page's route (eg. "/map"). Be sure to include `as='a'` in the `<MenuLink>` element for expected behavior:

```javascript
// components/layout/MainNav.js
    // other component stuff...
    <Menu>
        <MenuButton>
            Menu <span aria-hidden className={styles.hamburger}>☰</span>
        </MenuButton>
        <MenuList id="menu">
            <MenuLink as="a" href="/">
                Home
            </MenuLink>
            <MenuLink as="a" href="/map">
                Map
            </MenuLink>
            <MenuLink as="a" href="/about">
                About
            </MenuLink>
        </MenuList>
    </Menu>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.webgeoda.org/pages/adding-and-customizing-pages.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
