Sidebar

The sidebar provides application-level navigation and quick access to top-level content collections in your application. Selecting an item in the sidebar allows users to navigate to a specific piece of content.

Create Sidebar

As with any navigation element, it is best to use the foreground to create the tab bar. This way the tab bar is persistent throughout the application and you can use the states to represent the selection of each icon.

Go to the foreground.

Design Sidebar

In the first foreground, prepare your sidebar when it is hidden. By creating a new linked foreground, you’ll create the opening effect of this sidebar thanks to the transitions.

Import the graphic elements of your sidebar: the background bar and the icons (menu, close). For the background bar, you can use a Shape. Insert text blocks.

Create Link to Each Screen

Above each text, add an Interactive Area component, which allows you to expand the tap area. Link the Change screen action to the right screen.

Create the Opening Effect of the Sidebar

Create a new foreground linked to the previous one (in the Foregrounds panel, open the + menu and choose Create a linked foreground) to keep the links and transitions. Move your sidebar elements to the left side of the screen.

Return to the previous foreground and select the menu icon. Create the Change foreground > Display sidebar action.

Associate Foreground to Screens

At the screen level, go to the Properties panel and select, in the Foreground list, the foreground in which the sidebar is hidden. The sidebar can only be opened by clicking on the menu.