**The sidebar container control is available in versions BETA4 and higher**

(Script tags will be stripped)

# Introduction

The sidebar container allows the addition of a sidebar to your mobile app. It features are clean and simple

  • expanding using the native scrolling effects (for instance spring animation on iOS)

  • collapsing using the native scrolling effects

  • containing any kind of content or other controls

  • API for expanding and collapsing


Please see the **UgSidebarDemo** project for the source code created in this chapter. See [Installing examples](🔗) for information on how to download the examples.

# Using the sidebar

The sidebar control has two different areas. The sidebar panel and the main area that the sidebar overlaps. A control button is used to toggle between the different areas and easily design them:

(Script tags will be stripped)

Follow these steps

  1. Drop sidebar on main page

  2. Expand the sidebar pressing the sandwich button

  3. Add any contents

  4. Collapse the sidebar

  5. Work on your main content

(Script tags will be stripped)

# Referencing content on the sidebar panel

Please make sure to use the **panel** property to reference any control with the sidebar panel. Here the code for linking up the first menu button

# Programmatically collapsing the sidebar

Use the **isHidden** attribute of the sidebar to collapse and expand the sidebar

# Setting width of sidebar

Use the bounds settings in the Layout section to set the width of the sidebar

(Script tags will be stripped)