The editor / Pages & navigation

Pages & navigation

Pages are the screens operators move between. They live in a tree of pages, page groups and dialogs. This chapter walks through building that tree and giving operators a way to navigate it.

The page tree: shell regions (header, sidebars, footer) above the page list and dialogs, each expandable and countable.

How the tree is organised

Open the Editor area in the left rail. The tree is a fixed set of collapsible sections, each with a + on its row:

Section	Holds	`+` adds
Header ▣ · Left sidebar ◧ · Right sidebar ◨ · Footer ▄	The shell regions that wrap every page — see Layout.	a widget to that region
Pages	The screen tree operators navigate.	a page or a page group
Dialogs	Modal overlays, not part of the page tree.	a dialog

Add your first page

Add it — Click the + on the Pages section row, or right-click inside the section and pick Add Page. A blank page appears, selected, with its properties open on the right.
Name it — Set the page title in the properties panel (or double-click the tree row to rename). The title feeds the browser tab, the $page source, breadcrumbs and menus.
Fill in the details — Give it an icon, a breadcrumb label, and a description as needed — navigation widgets read these automatically.

Group, nest, and reorganise

The tree's right-click menu is where structure happens, and it changes with what you clicked. Use it to keep related screens together and to reshape the hierarchy as the project grows.

Menu item	Where	What it does
`Add Page`	Pages section, page group	Create a page — at the root, or inside the group you clicked.
`Add Page Group`	Pages section, page group	Create a page group — a container that stacks its own pages and gets its own navigation. Groups can nest.
`Move to page group…`	a page	Reparent the page into a chosen group.
`Move to root`	a page	Lift the page back up to the top level.
`Rename` · `Copy` · `Paste`	pages, groups, dialogs	The usual edits; paste drops a copied page (and its widgets) in place.
`Delete Page` · `Delete Page Group` · `Delete Dialog`	the matching node	Remove it.

Dialogs are added from their own section, not from the page right-click menu — click the + on the Dialogs row. They live outside the page tree because they open over whatever screen is current rather than being navigated to.

Page groups vs. dialogs. A group is for sets of sibling screens that share a navigator or tab bar (e.g. a wizard, or one screen per machine). A dialog is for a focused, dismissable task on top of the current screen (confirm, set a value, show detail).

Give operators a way around

You don't hand-wire links. Navigation widgets read the page tree and stay in sync as it changes. Add whichever fits the layout:

Navigation Menu — A sidebar or top-bar menu that mirrors the page tree automatically. Choose orientation, icon/label display, flat vs. tree hierarchy, and how sub-menus expand.
Tab Bar — Switches between the sibling pages of a group as tabs — ideal inside a page group.
Breadcrumb — Shows the trail of pages leading to the current one, with an optional home icon.
Page Navigator — Back / forward / up controls scoped to a page group's navigation stack.

Put these in a shell region (see Layout) so they persist while operators move between screens.