Navigation and Links

Once you have created multiple pages for your website, you can connect them using links.

In Essepage, links are created with the href attribute of the standard HTML <a> element. Because URLs are generated from the folders and page files inside /public, you do not need to install a separate router or create a navigation configuration file.

For a page link, enter a URL path relative to the root of the site, excluding /public and +page.essepage.

<a href="/about">About Us</a>

Clicking the link takes you to the /about page of the site.

Checking Page URLs

Before connecting a page, you need to know its URL.

Consider the following file structure:

/public
├── +page.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

Each page corresponds to the following URL:

In the link’s href, enter the URL path used by visitors rather than the path of the page file.

<a href="/about">About Us</a>

Do not enter the page file path like this:

<a href="/public/about/+page.essepage">About Us</a>

The +page.essepage file name does not appear in the URL.

When linking to a regular HTML file such as index.html, include the file name.

<a href="/about/index.html">About Us</a>

To learn more about how page files are connected to URLs, see Creating Pages and URLs.

Linking Pages Within Your Site

When linking pages within the same site, it is best to use paths based on the root of the site.

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

Each link opens the following page:

Creating a Navigation Menu

You can create a basic navigation menu by placing multiple links inside a <nav> element.

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

<main>
    <h1>Welcome to Our Website</h1>

    <p>Explore our website using the menu above.</p>
</main>

You can add simple CSS to adjust the spacing between menu links.

<style>
    nav {
        display: flex;
        gap: 20px;
    }
</style>

Use the same menu order and names on every page so visitors can easily find the main pages of your site.

Sharing a Menu Across Multiple Pages

If you write the same menu directly on every page, you must update every page whenever the menu changes.

As the number of pages grows, it is better to move the shared menu into a layout or component so that you can manage it in one place.

To use the same menu throughout the site, you can create a layout in /public/+layout.essepage.

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

<essepage-slot></essepage-slot>

<style>
    nav {
        display: flex;
        gap: 20px;
    }
</style>

The content of each page file appears where <essepage-slot> is placed.

If a page file contains a <main> element, that element also appears unchanged at the slot position.

Managing a shared menu in one place allows you to add or update links without editing each page separately.

See Layouts and Components for detailed instructions.

Linking to an External Website

To link to another website, enter the complete URL beginning with https://.

<a href="https://example.com">Visit Example</a>

Next Steps

Now that you understand how to create navigation and links, continue with the following guides:

• Create pages that use part of the URL as a value: Parameter Folders
• Create a page for addresses that do not exist: Custom 404 Pages
• Use a shared menu across multiple pages: Layouts
• Manage menus and repeated elements in separate files: Components
• Learn how page navigation works in Essepage: CSR and SSR