Bottom Navigation in Jetpack Compose


In this block, we are going to learn about the bottom navigation bar in jetpack compose using the navigation component. I have designed bottom navigation just like a social media app. The Navigation component provides support for Jetpack Compose applications. You can navigate between compostables while taking advantage of the Navigation component’s infrastructure and features. Navigation in jetpack compose is different from XML navigation design in android.

Add Dependency

First of all, use the following navigation dependency in your app module’s build.gradle file in android.

Create Screens

After building, the project creates NavigationScreens.kt file. we are not using fragments and activities to display the content, so we are creating composable functions to show the screen content. now we are creating four composable functions home screen, message screen, notification screen, and profile screen. these functions display the navigation screen.

Create Directory

After creating the screens, we are creating a sealed class with the name BottomNavigationFiles to store navigation files like title, item icon, and item route key. which we will use these files to route the navigation between screens.

Creating a NavHost

Each NavController must be associated with a single NavHost composable. The NavHost links the NavController with a navigation graph that specifies the composable destinations that you should be able to navigate between. So we are creating a composable function “controlScreen” navigation action.

Navigate composable

To navigate to a composable destination in the navigation graph, so we are creating a function “bottomNavigationView” handling the bottom navigation back stack and defining the start destination. To navigate from a composable within the navigation graph, call navigate():

Create Main Function

We are creating the ‘homeScreenView’ composble function with scaffold and define the ‘bottomNavigationView’ and ‘controlScreens’.at last we define this function to onCreateView on the mainActivity.



Finally, the output, As you can see what we are doing here is telling the NavHost to run the Notification screen and Home screen.


In this blog, we have learned about the Bottom Navigation Bar in jetpack compose. we have learned how to implement NavController and regarding the compose Bottom Navigation Bar visit this link.

Thanks for reading this blog. You can also check other blogs from here.

Always be ready for learning 🙂

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


  • Ulalo Banda
    This is very insightful but as am new to jetpack compose am having trouble implementing the section in the fun BottomNavigationview where BottomNavigation(){} and its BottomNAvigationItem() are being highlighted in red and suggesting to create a composable function am not sure what the problem is all my dependencies are well in place and that doesn’t seem to be an issue in all the tutorials I have seen including yours which am following now spent an entire day trying to solve it but nothing has worked, could you maybe please shed light on it
    • Govind Singh (Moderator)
      Hi, As we have checked, your issue is related to the function. you need to create a composble function of the Bottom Navigation bar, then you have to pass this function on the “bottom bar” inside the scaffold of the main class.
      –> Screenshot:-
  • css.php

    The results provided were above our expectations both in deliverability timeline as well as operation. They are a top-notch company with many resources and a company we feel honoured to work with again!

    Lee Seward

    Lee Seward

    Founder, Gro-Connect

    Talk to Sales


    Live Chat
    Start a Project

      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home