Menus and navigation

Menus are edited under Menus in the sidebar.

A menu is a list of items. Each item is one of three kinds:

The Opens as setting

Every item in the top row of a menu has an Opens as setting with three choices:

1. A single link. The item is one link in the bar. Sub-items filed under it are not shown on the site.
2. A dropdown of links. The item's sub-items appear in one column when a reader opens it.
3. A panel of columns. The item opens a wide panel. Each sub-item becomes a column heading, and the links added under that sub-item become the links in that column.

Adding sub-items does not change this setting. An item stays A single link until Opens as is changed by hand, so filing a page under a menu item never changes the shape of the header. The reverse case needs attention: sub-items added to an item left on A single link do not appear on the site. The panel shows a note under the sub-items when an item is in that state.

Building a panel of columns

1. In Menus, open the menu and expand the top-level item to change.
2. Set Opens as to A panel of columns. The button below changes from Add a sub-item to Add a column.
3. Select Add a column and give the column a label. A column heading is usually given the kind A heading (not a link), because the heading is not meant to be clicked.
4. Inside the column, select Add a link and add the pages that belong in it.
5. On each link, optionally fill in Description, shown as one line of text under the link, and Image. These two fields appear only on links inside a panel of columns.

A menu has at most three tiers: the items in the bar, the column headings (or dropdown entries), and the links inside each column. The panel refuses to save anything deeper.

Deriving contents from a page

A dropdown or panel can be filled by hand, as above, or from a page: the page's own children then supply the contents, so the menu stays current as pages are added, with no second edit in Menus.

1. In Menus, open the menu and expand the top-level item to change.
2. Set Opens as to A dropdown of links or A panel of columns.
3. Set Contents, which appears once one of those two is chosen, to **Built from a page's children. A single link has no Contents** field, because it opens nothing.
4. Choose the Source page.

Once a source page is chosen, the sub-item list is removed from the form, because the page tree now supplies the contents.

A panel of columns draws two levels from the source page: its children become the column headings, and their children become the links inside each column. A dropdown of links draws one level: the source page's children become the dropdown's links. Adding a page under the source page adds it to the menu with no edit in Menus.

Three limits bound how much a derived panel or dropdown draws:

Changing a limit is a developer change.

When the source page has more children than the column limit or the dropdown limit allows, the contents end with a single "All *label*" link pointing at the source page, so the sections that were not drawn are one click from the header.

A column that exceeds its own limit of 6 links is handled differently. It also adds the "All *label*" link, and that link also points at the source page, not at the column whose links were dropped. A column with 8 children draws the first 6 in sort order; the remaining 2 are reachable only through the column heading, which links to that column's own page. The panel does not indicate that 2 links were left out. A section with more than 6 pages under one column heading needs either fewer pages in that column or a higher max_links_per_column.

The "All *label*" link is left out in one case: when the menu item itself already points at the page it derives from. The panel then opens with a ":label overview" entry pointing at that page (with the item's name in place of :label), and an "All *label*" link below the columns would be a second link to the same address.

To keep a page out of a derived panel or dropdown, use the same switch that keeps it out of the header's page-tree navigation:

1. Open the page's edit screen and expand Page settings.
2. Under Where this page appears, turn on Hide from navigation.
3. Publish the page.

A derived panel has no menu items of its own to carry a label, a description or an image, so each entry takes them from the page it stands for. Navigation label, Navigation description and Navigation image are fields in the Page settings section of each page that appears in the panel (every column heading and every link inside a column), not of the source page, which only supplies the list.

Each of the three fields is used as follows:

• Navigation label replaces the title wherever the page appears in a menu, including column headings, the links inside columns, and a derived dropdown's links.
• Navigation description and Navigation image are drawn only on the links inside a panel's columns. A column heading's description and image are not drawn anywhere, so filling them in on a page that is a column heading has no visible effect. A derived dropdown draws plain links and uses neither field.

A source page with no translation in the language a visitor is reading derives nothing. The item then renders as a plain link instead of opening an empty dropdown or panel.

Menu behavior on the site

A dropdown or panel opens when a reader clicks or taps its item, not when the pointer passes over it. It closes on a second click, on the Escape key, and when the reader clicks anywhere else on the page. The header behaves the same way on a phone, which has no hover, and can be operated with a keyboard alone.

If a top-level item both points at a page and opens a dropdown or panel, the item's own page is still reachable: it appears as the first entry inside the dropdown or panel, labeled "*item name* overview". Clicking the item opens the dropdown or panel instead of going to the page, which is why the overview entry is added.

Page items and web address items

Use A page on this site instead of A web address whenever the target is a page on this site, for two reasons:

1. A typed address does not update when the page moves.
2. On a multilingual site, a typed address cannot lead the reader to the page in their language.