¶ Menu component
The Menu component is used to build navigation menus inside a Pyplan interface. With it we can group links to different interfaces or actions in a single, structured component, making it easier for users to move through the application.
In the examples shown in the images, the Menu component is used to navigate to Federer’s Statistics and View Code from a single entry called Federer’s Statistics.
¶ Adding and configuring a Menu
After placing a Menu component on the canvas, we configure it from the Component configuration panel on the right.
The main options are:
¶ Format
At the top of the configuration we choose the Format of the menu. The dropdown offers several layouts:
- Accordion (shown in the screenshots) – groups items into expandable sections. Each section can contain one or more actions or links.
- Boxes – displays menu entries as separate tiles or cards.
- Compact menu – shows a more condensed list, useful when we have many items and less space.
The selected format affects only the visual presentation; the underlying menu structure and actions remain the same.
¶ Search input
For large menus, we can enable Show search input. This adds a search box at the top of the Menu component so users can quickly filter entries by typing part of the menu item name.
¶ Menu editor
To define the content and structure of the menu we click Open menu editor in the configuration panel.
From the menu editor we can:
In the Menu editor we define the structure and behavior of each menu item.
At the top we have the buttons:
- Add menu item – creates a new section or group (for example, “Federer’s Statistics”) under the Root.
- Add action – adds a new clickable item inside the selected section (for example, “View Code”).
- Remove action – deletes the selected action or item.
On the left side of the dialog we see the menu tree:
- Under Root we have the section Federer’s Statistics.
- Inside that section there are two actions rendered as tiles:
- Federer’s Statistics
- View Code (currently selected and highlighted in blue).
On the right side we see the Properties panel for the selected item:
- At the top, the item name.
- Action type dropdown, where we choose what the item does when clicked. In the image the options are:
- Open interface – opens a specific interface in the application.
- Navigate – navigates to another area of the app (for example, Code, Interfaces, Scenarios, etc.).
- Below, additional fields (such as Code or target, and Subtitle) let us specify the interface or section to open and optional descriptive text.
After configuring the properties, we click Apply to save the menu changes and close the editor, or Close to exit without applying modifications.
¶ General and Styles
Under General we configure basic options for the component, such as its title, behavior, and other high‑level settings.
Under Styles we control the visual appearance—font, colors, alignment, spacing, and related layout options—so that the component matches the overall design of the interface.
¶ Typical usage
We usually use the Menu component to:
- Create a home page for an application, with grouped links to the main interfaces.
- Organize thematic sections (e.g., “Planning”, “Reports”, “Admin”) each containing several entries.
- Offer a compact navigation bar inside a complex interface, so users can jump to the views they need without leaving the current app.
By combining the Menu component’s formats (Accordion, Boxes, Compact menu), search input, and the menu editor, we can design clear and intuitive navigation structures that guide users through Pyplan applications.