Menus and navigation

A menu is the set of links visitors use to move around your site. It normally sits in the header of every page, and collapses into a hamburger button on phones.

Your site’s main menu is the one whose location is header and whose status is Published. A site can also keep a footer menu — the one whose location is footer — for a theme that shows different links at the bottom of the page; the theme places it by name, with {{nav menu="…"}} (see below). A new site is seeded with three menus — Header Menu, Footer Menu and Mobile Menu. Nothing renders Mobile Menu: the phone drawer shows the header menu.

Edit them at Settings → Menus (/admin/settings/menus). The page takes you straight into the header menu’s editor (/admin/settings/menus/{id}), and the Header and Footer tabs beside the page title switch between the two. The first click on Footer creates the footer menu if the site does not have one. If the site has no menu at all — because they were deleted — Settings → Menus creates one called Main Menu first.

Who can edit the menu

Role	Can edit menus
super_admin	Yes
admin	Yes
editor	No (the item is hidden from the sidebar)
writer	No

Menus are not limited by plan and do not need the experimental flag. Your role is the only condition. See Users and permissions.

What the editor shows you

• Left — your menu items as a tree. Each row has a drag handle; click a row to open its fields underneath it.
• Below the list — the Add Page and Add Item buttons.
• Right — Draft/Published status, the item count, and the Update button (it becomes Save All while a reordering is still pending).

Adding menu items

Add Page

1. Click Add Page.
2. Pick a page from the list. It shows published pages in your primary language only, indented to match their parent/child nesting.
3. The item appears immediately, labelled with the page’s title.

This binds the item to the page itself rather than remembering a URL string, which means:

• Change the page’s slug later and the menu link follows it.
• A page nested under another gets its full path, for example /about/team.
• On a multi-language site, the link switches to that language’s translation of the page (see Multi-language below).

If you move a linked page back to draft, the item stays in the menu but the link leads to a Not Found page. Remove the item, or publish the page again.

Add Item

Click Add Item. SeedWebs creates an item called New Item and opens its fields, where you type the label and URL yourself. Use this for links to other sites, or for paths that are not pages — /posts, for example.

Item settings

Click a row to open its fields.

Field	What it does
Label	The text visitors see. On a site with more than one language, small language tabs appear in the corner of this field.
Type	Link · Page · Group · Content
URL	A path inside your site starting with / (/contact), or a full address elsewhere (https://…). This field becomes a page picker when Type is Page, and disappears entirely for Group and Content.
Target	Same Window or New Tab. Not shown for Group or Content.
CSS Class	Extra classes added to that link, if you style your menu by hand. Also how you show an item in one language only — see Multi-language sites below.
Mega menu	Top-level items only. Turn it on to render that item’s children as a multi-column panel.

Click Update to save the item. Delete item is at the far right of the fields.

Things worth knowing about the types:

• Group is a heading with items underneath it. It stores no URL, so clicking the heading itself goes to your home page; the children open on hover.
• Content offers an HTML Content field, but the menu the public site renders through {{nav}} uses only each item’s label and URL — that HTML is not displayed.
• Any item without a URL, whatever its type, links to the home page.

Ordering and submenus

1. Drag a row’s handle up or down to reorder.
2. Drag it about one step to the right (24 pixels) to tuck it under the row above as a child.
3. Let go and the new order saves itself. Order saved appears in the bottom-right corner.

Also true:

• You can nest several levels deep. Deep submenus open sideways on desktop.
• An item with children gets a collapse arrow in the editor, so long menus stay draggable.
• You cannot drop an item inside itself or inside one of its own children; the drag is cancelled.
• Deleting a parent deletes every item nested under it.

Mega menus

A mega menu is a wide panel that opens under a top-level item, split into columns. The structure SeedWebs expects is three levels deep:

1. The top-level item — the one with Mega menu turned on.
2. Its children — column headings.
3. Their children — the links inside each column.

Turning Mega menu on reveals a Mega width setting.

Option	Minimum panel width
Default	560px
Narrow	480px
Medium	640px
Wide	800px
Extra wide	1024px
Full screen width	Edge to edge

On phones a mega menu becomes a collapsible heading in the menu drawer, with each column as a group of links stacked down the page.

Where the menu appears

The public site takes the Published menu at location header. The theme decides where it goes, by putting a {{nav}} tag in its header or footer:

• {{nav}} shows the header menu, and so does the mobile drawer ({{nav mobile="true"}}).
• {{nav menu="footer"}} shows the menu whose slug is footer instead. The Footer tab in Settings → Menus prints this tag with your footer menu’s slug, ready to copy into the theme’s Footer code.

While the named menu has no items, or is Draft, {{nav menu="…"}} shows the header menu instead. Adding items to it is what switches that spot over.

{{nav location="footer"}} does not show the footer menu. It shows the header menu, as it always has — some themes, including the Shop theme, already write it in their footer, and they keep showing exactly what they showed before. To show the footer menu, change that tag to the one printed on the Footer tab — {{nav menu="footer"}} for the Footer Menu a new site starts with.

Before you set up a menu

SeedWebs will not leave your header empty. If either of these is true:

• there is no Published menu yet, or
• the menu exists but has no items,

it builds a fallback menu from:

1. A Home link to your home page.
2. Every published top-level page (excluding the page whose slug is home), sorted by title.
3. A link per enabled content type, from this table:

Content type	Link	Label
posts	/posts	Blog
events	/events	Events
products	/products	Products
staffs	/staffs	Staff
books	/books	Books
docs	/docs	Docs

If you renamed a type under Settings → General → Admin Menu, its link shows your name instead of the label above, on pages in the language you wrote the name for. The link itself does not change. See Admin panel overview.

The /docs link in that table has no listing page behind it. SeedWebs serves individual documents at /docs/{slug} only, so clicking it lands on Not Found unless you create a page with the slug docs yourself.

Once your menu has at least one item and is published, it takes over the header completely and every fallback link disappears — including Home. If you still want a link back to the home page, add an item whose URL is /.

Setting the menu’s status to Draft puts the fallback menu back. That is a convenient way to park a menu you are still building.

How a theme renders the menu

{{nav}} works only in a theme’s header and footer (Settings → Themes, General tab, Header / Footer fields). It does nothing inside page content or a content template.

The default theme writes this in its header:

<nav class="hidden md:flex items-center gap-1">
  {{nav}}
</nav>
<div class="md:hidden">
  {{nav mobile="true"}}
</div>

Attributes {{nav}} accepts:

Attribute	Effect
class="..."	Classes for the wrapping <ul>, merged over the defaults (flex items-center gap-1 on desktop, space-y-1 text-base in the mobile drawer).
itemClass="..."	Classes for each link.
activeClass="..."	Classes merged over itemClass when a link matches the page being viewed.
location="mobile" or mobile="true"	Renders a hamburger button with a full-screen menu drawer instead.
menu="..."	Shows the menu with that slug instead of the header menu — the header menu while that one is missing, Draft or has no items. Add mobile="true" to show it as a drawer.
location="footer"	Nothing: only mobile changes anything. Any other location shows the header menu as usual.
start="..." and end="..."	Shows part of the menu: the top-level items from number start to number end, counting from 1. See Splitting the menu around a logo below.

In the default theme, leaving itemClass out means links take their styling from the Nav Item part, which already highlights the current page — and activeClass then has no effect. To control the styling yourself, pass itemClass and activeClass together.

For example:

{{nav class="flex items-center gap-4" itemClass="text-sm text-gray-600 hover:text-black" activeClass="text-black font-semibold"}}

Splitting the menu around a logo

A header with the logo in the middle and links on both sides uses one menu, written twice:

<nav class="flex items-center justify-between">
  {{nav end="3"}}
  <a href="{{locale_home}}">{{site_logo class="h-12"}}</a>
  {{nav start="4"}}
</nav>

The first tag shows items 1 to 3, the second shows item 4 to the end.

• Leaving out start means from the first item; leaving out end means to the last.
• Only top-level items are counted. An item’s submenu goes with it.
• A range past the end of the menu shows an empty list, not an error. A value that is not a whole number of 1 or more is ignored.
• It works the same in the mobile drawer and with menu="…".
• With no menu set up yet, the fallback menu is counted as you see it, Home link first.

Going further with the markup

The menu’s HTML is split into small parts you can edit at Settings → Themes, Nav tab (/admin/settings/themes/{id}/nav).

Part	What it is
Nav Item	One link on desktop
Nav Submenu	The dropdown box that holds children
Nav Mega Header	The mega menu panel
Nav Mega Column	One column inside a mega panel
Nav Mobile Item	One link in the mobile drawer
Nav Mobile Submenu	A collapsible heading in the drawer
Nav Mobile Mega	A mega menu heading in the drawer
Nav Mobile Mega Column	A mega menu column in the drawer
Nav Mobile Drawer	The drawer itself

If you edit Nav Mobile Drawer, keep both of these or the drawer breaks:

• the close button carrying the class nav-mobile-close
• the {{items}} tag, which marks where menu items are placed

In the Default theme these parts cannot be deleted; if an edit goes wrong, use Reset to restore the factory version. Other themes borrow any part they have not defined themselves from the Default theme. More on this in Themes and templates, and the rest of the tags are in Template tags.

Multi-language sites

• Labels are stored per language. The language tabs appear in the Label field once Settings → General lists more than one language.
• A Translate missing button appears in the right sidebar when you have more than one language and an AI API key saved under Settings → General, AI Features. It fills in labels that are missing a translation, working from your primary language.
• When a visitor is on a page in another language — /th/about, say — internal menu links pick up the language prefix automatically. Links to other sites, email addresses and phone numbers are left alone.
• Page items switch to that language’s translation of the page. If no translation exists yet, the original page’s path is used.
• The Add Page picker lists pages in your primary language only, because one menu is shared by every language.
• To show an item in one language only, give it a CSS Class — th-only, say — and hide it on the other language with a line in Settings → Code, Custom CSS:

html[lang="en"] li:has(> .th-only, > details > .th-only) { display: none; }

Every page names its language in <html lang="…">, and the class sits on the item’s link, so this hides the whole item — desktop menu, submenu and mobile drawer — on English pages only. One exception: a mega menu column heading does not carry its class in the Default theme.

Building a menu with AI

With an AI API key saved, an AI button appears in the top-right of the menu editor and opens the AI Menu Manager.

1. Describe what you want — for example, clear everything and rebuild from the English pages.
2. SeedWebs comes back with a list of steps it intends to take, and how many there are.
3. Review it, then press Run plan to carry it out, or Start over to ask for something else.

The steps it can propose are: clear all items · pull in published pages as items · add an item · add a group with children · delete items whose labels match. Nothing happens until you confirm.

Saved, but the site still shows the old menu

Public pages are cached for speed. Saving a menu tells the cache to refresh, but that has to spread across the network — usually about a minute.

If it still has not changed, go to Settings → General and press Clear cache / Rebuild site. That button deletes no content.

When the menu is wrong

What you see	What to check
The header shows links you never added	The menu is still Draft, or has no items, so the fallback menu is in use.
The footer shows the same links as the header	The theme’s footer writes {{nav}} or {{nav location="footer"}}, which both show the header menu — use the {{nav menu="…"}} tag printed on the Footer tab of Settings → Menus. Or the footer menu has no items yet, or is Draft.
Menu edits do not reach the site	Wait about a minute, then press Clear cache / Rebuild site.
The whole menu vanished, leaving Home and content-type links	The Pages content type is switched off under Settings → General, Admin Menu. Turn it back on.
No Settings → Menus in the sidebar	Your role is editor or writer. You need admin or above.
An item leads to Not Found	The page it points at was moved to draft or deleted. See Pages and posts.
Clicking a heading with a submenu jumps to the home page	That item has no URL. Give it one, or leave it as it is if you want a heading only.