Django Menu

Here, we'll discuss our Menu/Navigation menu. Let's deep dive into it.


Introduction

We have two types of menus for two different layouts.

  • Vertical menu for VERTICAL layout
  • Horizontal menu for HORIZONTAL layout

We are using a JSON file to store all menu lists and render them in our menus. You can find these menu files in the templates/layout/partials/menu/horizontal or vertical folder.

  • json/vertical_menu.json menu for HORIZONTAL layout
  • json/vertical_menu.json menu for VERTICAL layout

How to add new menu item?

To add your new menu item in menu/navigation, you need to add your page details in your preferred menu file (ex: For vertical menu vertical_menu.json).

  1. First, Create/Use urls.py file in app (ex: test) which you've created and add the application path.
  2. from django.urls import path
    from .views import testView
    
    
    urlpatterns = [
        path(
          "",
            testView.as_view(template_name="test.html"),
            name="test",
        ),
    ]
    {
    "url": "test"
    "name": "Test Page",
    "icon": "menu-icon tf-icons ti ti-app-window",
    "slug": "test"
    },
    {
    "name": "Test",
    "icon": "menu-icon tf-icons ti ti-file-3d",
    "slug": "Test",
    "submenu": [
        {
        "url": "test",
        "name": "test Page",
        "slug": "test"
        },
      ]
    }
    Note: If you are using internationalization then you have to add your page name in locale/fr/django.po files.

To fill the url with url_path or an external link, it is mandatory to add one more json. "external": true

  1. url_path exmaple:
  2. {
    "url": "dashboard/crm/",
    "external": true,
    "name": "test Page",
    "slug": "test"
    },
    {
    "url": "http://example.com",
    "external": true,
    "name": "Dummy",
    "slug": "Dummy"
    },
© 2017- Pixinvent, Hand-crafted & Made with ❤️