When a configurator grows beyond a few controls, tabs can quickly become cluttered and hard to navigate. A good alternative is to use stack screens.

What are stack screens?

A stack screen is a UI pattern where a button opens a new screen on top of the current one. Each screen can contain its own set of controls - such as sliders, dropdowns, or even another button that leads to a nested stack screen.

This makes it easy to organize complex apps with many controls without overwhelming the user. The pattern is common in mobile apps - just open your phone’s Settings app and you’ll likely see the same approach in action.

Example of a UI using stack screens

Using stack screens in Modelup

Stack screens can be built directly in Grasshopper using the Modelup plugin. No extra web development is required. They are built using two components:

• StackScreen: represents a screen that you populate with controls (sliders, dropdowns, etc.)
• StackScreenButton: represents a button that links to another StackScreen

Steps to create stack screens

Follow these steps:

1. Add a main screen Connect the output of a StackScreen component to the GUI Root component. This becomes your main screen.

   

2. Set title and description Right-click the StackScreen to add a title and description.

   • The title will be shown as the screen header
   • The description will appear below the header text

   Important: try keeping both the title and description concise.

   

3. Add content Zoom in on the StackScreen and press the plus (+) sign to add controls.

   • Only one component can be connected to each input.
   • To add navigation, create a StackScreenButton and connect it to the G input.