MD navigation drawer example (Kivy application)

main.py

# -*- coding: utf-8 -*-
'''
MD drawer Example

This example shows how to add a material design drawer navigation and one text button.
'''

from kivymd.app import MDApp
from kivy.lang import Builder
from kivymd.uix.stacklayout import MDStackLayout
from kivy.logger import Logger

import kivy
kivy.require('1.8.0')


# Using Stacklayout here so the drawer will add new items top to bottom.
class ContentNavigationDrawer(MDStackLayout):
    pass


class DrawerExampleApp(MDApp):
    def build(self):
        return Builder.load_file("kv/root.kv")
    
    def item1_click(self):
        Logger.info("item1 clicked")


if __name__ == '__main__':
    '''Start the application'''
    DrawerExampleApp().run()

MD Kivy drawer example.md

Usage

To run this code follow https://kivy.org/doc/stable/gettingstarted/installation.html to have a project with Kivy installed.

Next, run pip install kivymd inside of your virtaul env.

Copy paste the code above into your project. KV files into subfolder kv and main.py into the root of your project.

Finally, run python main.py

navigation.kv

<ContentNavigationDrawer>
    padding: "8dp"
    spacing: "8dp"

    MDLabel:
        text: "Navigation drawer demo"
        font_style: "Button"
        size_hint_y: None
        height: self.texture_size[1]
    
    MDTextButton:
        text: "Click me"
        on_press: app.item1_click()

root.kv

#:import get_color_from_hex kivy.utils.get_color_from_hex
#:include kv/navigation.kv

MDScreen:
    MDNavigationLayout:
        ScreenManager:
            MDScreen:
                MDToolbar:
                    title: "Navigation Drawer"
                    elevation: 10
                    pos_hint: {"top": 1}
                    md_bg_color: get_color_from_hex("#e7e4c0")
                    specific_text_color: get_color_from_hex("#4a4939")
                    left_action_items:
                        [['menu', lambda x: nav_drawer.set_state("open")]]

        MDNavigationDrawer:
            id: nav_drawer
            md_bg_color: get_color_from_hex("#f7f4e7")
            ContentNavigationDrawer: