Layout
Every page of a panel is rendered into the same layout: a sidebar with the navigation, a topbar and the content with its header. Pages only provide the content.
Sidebar
Section titled “Sidebar”The brand (logo and name) and the navigation: the dashboard, the pages and resources the user may open, in groups. Groups can have icons and be collapsible; entries can show badges. On desktops the sidebar can be collapsed to icons; on small screens it is a menu that slides in from the menu button of the topbar. Details: Navigation.
Topbar
Section titled “Topbar”| Element | Shown when |
|---|---|
| Breadcrumbs | always; they start with the dashboard and lead to the current page |
Global search (Ctrl+K / ⌘K) |
at least one resource of the panel has search columns, see Global search |
| Notifications (bell with unread count) | the user is logged in, see Notifications |
| Tenant switcher | with tenancy; users with several tenants switch and mark a favourite, see Tenants |
| Theme | light, dark or the system setting, remembered in a cookie |
| User menu | profile, own entries of userMenuItems(), logout, see User menu |
Content
Section titled “Content”- Header: the title, an optional subtitle, and on resource pages the actions (create, edit, own header actions).
- Width:
maxContentWidth()of the panel, see Configuration. - Messages: success and error messages appear as toasts in a corner; messages flashed before a redirect are shown on the next page.
- Confirmations: actions that need a confirmation open a dialog of the layout.
- Progress: a thin bar at the top while a request runs.
Accessibility
Section titled “Accessibility”The layout has a skip link to the content, landmarks (nav, main),
labelled controls and visible focus rings; it is usable with the keyboard
and works with screen readers. Colours meet WCAG AA in light and dark
mode.
Handover mode
Section titled “Handover mode”While a document is handed over for signing on the device of the employee (see Documents), the layout shows neither navigation nor search, notifications, tenant switcher or user menu – only the signing page.
Own styles and scripts
Section titled “Own styles and scripts”stylesheets() and scripts() of the panel add files to every page of the
panel, see Configuration
and Styling.