Site navigation

Every Easol site has two independent navigation areas - a header and a footer - that appear on every page. Each one is a special partial with its own navigation items, schema, and template code. The header and footer cannot access each other's data.

Creators manage navigation items in the site builder under My Site, where they can add links to pages, experiences, accommodations, blog posts, and external URLs. Theme developers control how those items are rendered by editing the header and footer templates.

How it works

The header template (partials/menu/index.html) is rendered at the start of the <body> tag on every page. The footer template (partials/footer/index.html) is rendered at the end. Both templates:

• Support a schema for custom variables (colours, logos, CTAs, etc.)
• Expose a navigation items tree via menu.items or footer.items
• Have access to global objects like company, cart, user, and page

partials
├── menu
│   └── index.html      ← Header template
└── footer
    └── index.html      ← Footer template

Navigation items

Creators can add the following item types to either the header or footer navigation:

Items can be nested up to 3 levels deep (controlled by the theme via max_item_levels). Each item exposes label, url, new_tab, items (children), and linked_resource in Liquid.

In this section

• Footer — A secondary, independent navigation area rendered at the bottom of every page.
• Header — The primary site navigation. Supports caching, custom schemas, and up to 3 levels of nested items.
• Redirects — Manage URL redirects to guide visitors from old or alternative URLs to the correct pages.