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.
Copy

from django.urls import path
from .views import testView


urlpatterns = [
    path(
      "",
        testView.as_view(template_name="test.html"),
        name="test",
    ),
]

2. To add menu item as main menu:
Tip: It's suggested to use url name (from the above code) instead of path. It helps django to manage translation and proper routing.
Copy

{
"url": "test"
"name": "Test Page",
"icon": "menu-icon tf-icons bx bx-envelope",
"slug": "test"
},

3. To add item as a sub menu item:
Copy

{
"name": "Test",
"icon": "menu-icon tf-icons bx bx-file",
"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.
Info: For more details refer Django Create New Apps & Pages

How to add external link or url_path?

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:
Copy

{
"url": "dashboard/crm/",
"external": true,
"name": "test Page",
"slug": "test"
},

2. Http link exmaple:
Copy

{
"url": "http://example.com",
"external": true,
"name": "Dummy",
"slug": "Dummy"
},