# Sidebar

> The sidebar offers application-level navigation and easy access to top-level content collections. Discover how to create, design, and implement sidebars effectively in your app.

https://docs.pandasuite.com/essentials/navigation/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.**

[Image: Sidebar open on the left of a smartphone screen, with six section links and a close cross, over a list of gardens]

## Create Sidebar

As with any navigation element, it is best to [use the foreground](https://docs.pandasuite.com/essentials/project-properties/foreground-and-background/) 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.

[Image: Foreground “Sidebar hidden”: the sidebar sits off-screen to the left; its menu icon remains visible.]

### 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.

[Image: Interactive Area over the “Quiz” link of the sidebar, with its Single tap action Go to screen 3 Quiz]

### 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.

[Image: Foreground “Display sidebar”, linked to “Sidebar hidden”: the sidebar overlays the left side of the screen.]

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

[Image: Menu icon with its single tap/click action changing the foreground to Display sidebar]

### 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.

[Image: Screen properties: the Foreground list is open and “5. Sidebar hidden”, where the sidebar is off-screen, is selected]