Django Oscar - Customizing the Dashboard Bar - Part 26

Time to customize the Django Oscar dashboard navigation menu.

The dashboard navigation can be configured from the project settings. This is useful when we want to add shortcuts, reorganize sections, or link custom dashboard pages.

 

Dashboard navigation setting

Django Oscar uses the OSCAR_DASHBOARD_NAVIGATION setting to build the dashboard menu.

OSCAR_DASHBOARD_NAVIGATION = [
    {
        "label": "Catalogue",
        "icon": "fas fa-sitemap",
        "children": [
            {
                "label": "Products",
                "url_name": "dashboard:catalogue-product-list",
            },
            {
                "label": "Product Types",
                "url_name": "dashboard:catalogue-class-list",
            },
            {
                "label": "Categories",
                "url_name": "dashboard:catalogue-category-list",
            },
        ],
    },
]

This controls what appears in the dashboard sidebar.

 

Adding a custom menu item

For example, we can add a direct link to the product attributes section.

OSCAR_DASHBOARD_NAVIGATION = [
    {
        "label": "Catalogue",
        "icon": "fas fa-sitemap",
        "children": [
            {
                "label": "Products",
                "url_name": "dashboard:catalogue-product-list",
            },
            {
                "label": "Product Types",
                "url_name": "dashboard:catalogue-class-list",
            },
            {
                "label": "Categories",
                "url_name": "dashboard:catalogue-category-list",
            },
        ],
    },
    {
        "label": "Store",
        "icon": "fas fa-store",
        "children": [
            {
                "label": "My Custom Page",
                "url_name": "dashboard:my-custom-page",
            },
        ],
    },
]

The url_name must match a valid Django URL name.

 

Linking to a custom dashboard view

Let us create a simple dashboard page.

from django.contrib.admin.views.decorators import staff_member_required
from django.utils.decorators import method_decorator
from django.views.generic import TemplateView


@method_decorator(staff_member_required, name="dispatch")
class CustomDashboardView(TemplateView):
    template_name = "Store/dashboard/custom_page.html"

Now add the URL.

from django.urls import path
from .views import CustomDashboardView


urlpatterns = [
    ...

    path(
        "dashboard/custom-page/",
        CustomDashboardView.as_view(),
        name="dashboard-custom-page",
    ),
]

Then add it to the dashboard navigation.

OSCAR_DASHBOARD_NAVIGATION = [
    {
        "label": "Store",
        "icon": "fas fa-store",
        "children": [
            {
                "label": "Custom Page",
                "url_name": "dashboard-custom-page",
            },
        ],
    },
]

 

Template

Create the template:

mysite/Store/templates/Store/dashboard/custom_page.html

{% extends "oscar/dashboard/layout.html" %}
{% load i18n %}

{% block title %}
    Custom Dashboard Page
{% endblock %}

{% block dashboard_content %}
    <div class="table-header">
        <h2>Custom Dashboard Page</h2>
    </div>

    <div class="card card-body">
        <p>This is a custom dashboard page.</p>
    </div>
{% endblock %}

 

Icons

The icon value accepts Font Awesome classes.

"icon": "fas fa-book"
"icon": "fas fa-store"
"icon": "fas fa-tags"
"icon": "fas fa-cog"

For example, for a bookstore section:

{
    "label": "Book Store",
    "icon": "fas fa-book",
    "children": [
        {
            "label": "Books",
            "url_name": "dashboard:catalogue-product-list",
        },
        {
            "label": "Product Types",
            "url_name": "dashboard:catalogue-class-list",
        },
    ],
}

 

Book store example

Since this series is using books as reference, we can create a small dashboard section for book-related shortcuts.

OSCAR_DASHBOARD_NAVIGATION = [
    {
        "label": "Books",
        "icon": "fas fa-book",
        "children": [
            {
                "label": "All Books",
                "url_name": "dashboard:catalogue-product-list",
            },
            {
                "label": "Book Types",
                "url_name": "dashboard:catalogue-class-list",
            },
            {
                "label": "Categories",
                "url_name": "dashboard:catalogue-category-list",
            },
            {
                "label": "Offers",
                "url_name": "dashboard:offer-list",
            },
        ],
    },
]

 

Simple rule

Use OSCAR_DASHBOARD_NAVIGATION when you want to change the dashboard sidebar without editing templates.

It is useful for custom dashboard pages, shortcuts, and cleaner navigation for store managers.