---
# System prepended metadata

title: Side menu

---

# Side menu
## Required
```java=
dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.2.1'
    implementation 'androidx.navigation:navigation-ui-ktx:2.2.1'
}
```

1. Create a menu.xml
```xml=
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">

        <item android:id="@+id/item1" android:title="item1"/>
        <item android:id="@+id/item2" android:title="item2"/>
        <item android:id="@+id/item3" android:title="item3"/>

    </group>
</menu>
```

2. Edit activity_main.xml
Note that layout_gravity must set 
```xml=
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.navigation.NavigationView
        android:layout_width="240dp"
        android:layout_height="match_parent"
        app:menu="@menu/menu"
        android:layout_gravity="start"/>

</androidx.drawerlayout.widget.DrawerLayout>
```

3. Now you can slide from left to show menu
![](https://i.imgur.com/fwOM1CW.png)

## Add toggle button on toolbar
1. Add a toolbar element in activity_main.xml
```xml=
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimaryDark"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark" />

    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:layout_width="240dp"
        android:layout_height="match_parent"
        app:menu="@menu/menu"
        android:layout_gravity="start"/>

</androidx.drawerlayout.widget.DrawerLayout>
```

2. Add code in MainActivity.kt
```kotlin=
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setSupportActionBar(toolbar)

        val toggle = ActionBarDrawerToggle(this,drawerLayout,toolbar,0,0)

        drawerLayout.addDrawerListener(toggle)

        toggle.syncState()
    }
}
```

3. Remember set AppTheme style with NoActionBar or you will get error
```xml=
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
```

4. Result
![](https://i.imgur.com/v707fv7.png)

## Trigger side menu item click
1. Set id to NavigationView
```xml=
<androidx.drawerlayout.widget.DrawerLayout ...>

...

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/drawer_navigationView"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        app:menu="@menu/menu"
        android:layout_gravity="start"/>

</androidx.drawerlayout.widget.DrawerLayout>
```

2. Kotlin code
```kotlin=
drawer_navigationView.setNavigationItemSelectedListener { item ->

    drawerLayout.closeDrawers()

    when(item.itemId){

        R.id.item1 ->{

            Snackbar.make(drawerLayout,"Item 1 press",Snackbar.LENGTH_SHORT).show()
        }

        R.id.item2 ->{

            Snackbar.make(drawerLayout,"Item 2 press",Snackbar.LENGTH_SHORT).show()
        }

        R.id.item3 ->{

            Snackbar.make(drawerLayout,"Item 3 press",Snackbar.LENGTH_SHORT).show()
        }
    }

    return@setNavigationItemSelectedListener false
}
```