> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/navigation/ux/llms.txt)

# Sidebar configuration

Sidebars are the vertical control containers on the left and right sides of the screen in landscape orientation. The UX Framework exposes options to let users hide them, change their background or show different controls.

![UX Framework screenshot showing sidebar layout.](https://docs.mapbox.com/android/assets/ideal-img/dash-sdk-sidebars-layout.04f31f0.480.png)

Let's say your UX team realized that the left sidebar is unnecessary and the right sidebar should only display voice and camera buttons in different corners on a white semi-transparent background:

```kotlin
Dash.init(
    context = this,
    accessToken = getString(R.string.mapbox_access_token),
) {
    ui {
        leftSidebar {
            visible = false
        }
        rightSidebar {
            visible = true
            background = ColorUtils.setAlphaComponent(Color.WHITE, 128)
            controls = listOf(DashSidebarControl.Voice, DashSidebarControl.Space(), DashSidebarControl.Camera)
        }
    }
}
```

![UX Framework screenshot showing overridden sidebars.](https://docs.mapbox.com/android/assets/ideal-img/dash-sdk-sidebars-overridden.cf0777b.480.png)

It is also possible to display custom buttons and controls in sidebars:

```kotlin
DashSidebarControl.Button(
    iconId = R.drawable.my_button,
    onClick = {
        // handle my button click
    },
)

DashSidebarControl.Custom(
    content = { modifier ->
        Image(
            modifier = modifier.clickable {
                // handle my button click
            },
            painter = painterResource(id = R.drawable.my_button),
            contentDescription = "my button",
        )
    },
)
```