how to make navigation drawer on Kivy

How to make navigation drawer on Kivy look like this

Today i will tech you how to  make android navigation drawer in kivy

We are going to make android navigation drawer

First 1:

Create file and give file name

My case i will create main.py file name

Step 2:

Install kivy and  KivyMD on your device. Simple Type pip install kivyMD and kivy then enter

And ready to write code on your file first you need to Import some models

Which models is Given below.

from kivymd.app import MDApp // must be import  KivyMD

from kivymd.app import MDApp
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.label import Label
from kivy.uix.screenmanager import Screen

Step 3:

Create one class on your file . Here we write navigation drawer in class

class Main(Screen): # you must be give argument  Screen in class
    pass

Step 4:

Write your build app class which class is Help build application and run.

from kivymd.app import MDApp
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.label import Label
from kivy.uix.screenmanager import Screen

class Main(Screen):
    pass
    
class myapp(MDApp):
    def build(self):
        return Main()
        
myapp().run()

step 5:

create myapp.kv file on your same Location of main.py file

myapp name is class myapp name . Must be same name

And write this code

<Main>:   # here is Main indicate of class Main in main.py

<Main>:
    MDNavigationLayout:
        ScreenManager:
            Screen:
                BoxLayout:
                    orientation:'vertical'
                    MDToolbar:
                        title:'Home'
                        left_action_items:[['menu',lambda x: nav_bar.set_state('open')]]
                    
                    Widget:

Run main.py file  

Image with top button

explain this code step by step

MdNavigationLayout: create navigation

ScreenManager: Manage screen on Navigation

Screen: Create screen in navigation

BoxLayout : create  Vertical and Horizontal Layout in screen

MDToolbar: Create Toolbar in screen

Title: Toolbar title

Widget : Use to show toolbar in Top bar

Step 6:

You want to see Toggle on Toolbar and click toggle open to navigation drawer But how to do ?

– Create NavigationDrawer and give Navigation drawer id then pass the toggle

– MDNavigationDrawer:

id:nav_bar

Make Toggle

– left_action_items:[[‘menu’,lambda x: nav_bar.set_state(‘open’)]] # call id nav_bar Means click toggle then open navigation drawer

If you want to make toggle right size in toolbar

-right_action_items:[[‘menu’,lambda x: nav_bar.set_state(‘open’)]]

<Main>:
    MDNavigationLayout:
        ScreenManager:
            Screen:
                BoxLayout:
                    orientation:'vertical'
                    MDToolbar:
                        title:'Home'
                        left_action_items:[['menu',lambda x: nav_bar.set_state('open')]]
                    
                    Widget:
        MDNavigationDrawer:
            id:nav_bar

Run main.py  and look like this output

Img wirh toggle

Open Navigation drawer with empty content

Step 7:

navigation drawer on Kivy

Write Your Own Style on Navigation drawer like give image icon button logo anything

Icon is already available on kivy

You want more icon click me

<Main>:
    MDNavigationLayout:
        ScreenManager:
            Screen:
                BoxLayout:
                    orientation:'vertical'
                    MDToolbar:
                        title:'Home'
                        left_action_items:[['menu',lambda x: nav_bar.set_state('open')]]
                    
                    Widget:
        MDNavigationDrawer:
            id:nav_bar
            BoxLayout:
                orientation:'vertical'
                Image:
                    source:'llb.jpg'
                MDRectangleFlatIconButton:
                    icon:'home'
                    text:'Home'
                    font_size:'20sp'
                    size_hint_x:1
                    size_hint_y:0.3
                        
                MDRectangleFlatIconButton:
                    icon:'safe'
                    text:'privacy'
                    font_size:'20sp'
                    size_hint_x:1
                    size_hint_y:0.3
                MDRectangleFlatIconButton:
                    icon:'account'
                    text:'About Us'
                    font_size:'20sp'
                    size_hint_x:1
                    size_hint_y:0.3
                MDRectangleFlatIconButton:
                    icon:'share'
                    text:'Share Us'
                    font_size:'20sp'
                    size_hint_x:1
                    size_hint_y:0.3
                MDRectangleFlatIconButton:
                    icon:'phone'
                    text:'Contact Us'
                    font_size:'20sp'
                    size_hint_x:1
                    size_hint_y:0.3
                MDRectangleFlatIconButton:
                    icon:'heart'
                    text:'Rate Us'
                    font_size:'20sp'
                    size_hint_x:1
                    size_hint_y:0.3
                    color:(0,0,0, 1)
                Widget: