Building Dashboard using Dash — Responsive Navlink

Navlink Callbacks to update link and active state.

Resume Builder, dashboard link

Introduction

In the world of dashboard development, effective navigation is crucial for creating intuitive and seamless user experiences. One powerful tool that can enhance navigation capabilities is NavLink, a popular component provided by many frontend frameworks and libraries. In this blog, we will dive deep into the world of NavLink and explore its features, benefits, and best practices for leveraging its full potential in web routing.

Understanding NavLink

NavLink is a specialized component designed for handling navigation links within web applications. It is necessary to manage the active state of navigation links, provide visual feedback to users, support nested navigation structures, offer customization options, handle dynamic routing, and ultimately enhance the user experience in web applications.

We will use Dash, which is a Python framework that can be used to build interactive web-based dashboards. It is built on top of Flask, Plotly.js, and React.js, and provides a simple yet powerful way to create customized dashboards that can be used for data visualization, reporting, and monitoring.

Let’s Build

Step 1 Import all the required Library:-

1. Dash, which provides a powerful framework for building web applications in Python.
2. Dash-Mantine-Component, which offers a variety of components from Mantine React Library. Latest version — 0.12.1
3. Dash Iconify, offers a variety of icons that can be added to the navbar.
4. Jupyterdash, which allows us to create a dash app directly from a jupyter notebook.

import dash
from dash import Output, Input, State, html
import dash_mantine_components as dmc
from jupyter_dash import JupyterDash
from dash_iconify import DashIconify

Step 2 Before creating a responsive navbar in a dashboard application, it’s important to first create a skeleton app using the Dash framework. This involves initializing the app, creating the layout, and running the server.

app = JupyterDash(__name__)

app.layout = html.Div([

    # we will add corresponding layout here.

])

app.run_server()

Step 3 Build an out-of-the-box navbar using components provided by the Dash-Mantine library. The Navbar component provided by Dash-Mantine is one of over 70 components that the library offers, each with unique features and functionalities.

dmc.Navbar(
    p="md",
    width={"base": 300},
    height="100vh",
    style={'backgroundColor':'whitesmoke'},
    children=[
        #NavLink Will go here.
    ],
)

Step 4 Next, we’ll integrate a NavLink component from Dash-Mantine into our navbar. You can use dmc.NavLink’s n_clicks property in callbacks, or you can pass href to make it a link. Let’s start with href properties.

dmc.NavLink(label="Resume Builder",
            href='/resumeBuilder',
            icon=DashIconify(icon='fluent-mdl2:issue-tracking')
)

Left Side is Home page and Right side navlink clicked.

Although we have successfully implemented NavLink in our navbar, we have encountered an issue with the active state functionality. Typically, when using NavLink, the active property should be automatically set to true for the current page. However, in our case, this behavior is not being achieved when using href components (for dmc version 0.12.1).

Despite the default value of the active property in NavLink being set to false, we can address this by updating it to true when the NavLink is clicked. To accomplish this, we need to create a callback function that utilizes the n_clicks property of the NavLink component. By doing so, we can ensure that the active state is correctly toggled when the NavLink is clicked, enabling the desired functionality.

dmc.NavLink(label="Resume Builder",
            href='/resumeBuilder',
            id='link-1',
            icon=DashIconify(icon='fluent-mdl2:issue-tracking')
)


# we will use clientside Callback, for smooth transition.
# Used dash_clientside.callback_context, to check which navlink is clicked.
# will be usefull when having multiple navlink, which is obvious in dashboard.
dash.clientside_callback(
        """
    function handle_url(n1){
        var ctx = dash_clientside.callback_context;
        var prop_id = ctx.triggered[0]['prop_id'];
        if (prop_id === 'link-1.n_clicks') {
             return true       
        }
    }
    """,
    Output('link-1', 'active'),
    Input('link-1', 'n_clicks'),
    prevent_initial_call=True
)

Same as above image.

Despite implementing the callback, the issue regarding the active state not changing persists. What’s the problem? So the problem arises from using both the n_clicks property and the href property simultaneously. It appears that we cannot utilize both properties together. Therefore, we need to choose between using the n_clicks property or the href property.

In this scenario, we will opt to update the link using a callback and thus the dcc.Location component comes into picture. By leveraging dcc.Location, we can dynamically update the link based on user interactions or changes within the application. This approach allows us to maintain control over the active state and ensure that the correct link is updated when necessary.

In Location's refresh property we will use callback-nav . This will allow for navigating to a new page without refreshing the page.

dmc.Navbar(
    p="md",
    width={"base": 300},
    height="100vh",
    style={'backgroundColor':'whitesmoke'},
    children=[
        dcc.Location(id='url', refresh='callback-nav'), 
        dmc.NavLink(label="Resume Builder",
#             href='/resumeBuilder',             #comment it out href
            id='link-1',
            icon=DashIconify(icon='fluent-mdl2:issue-tracking')
            )
    ],
)


dash.clientside_callback(
        """
    function handle_url(n1){
        var ctx = dash_clientside.callback_context;
        var prop_id = ctx.triggered[0]['prop_id'];
        if (prop_id === 'link-1.n_clicks') {
             return ['/resumeBuilder', true]       
        }
    }
    """,
    Output('url', 'pathname', allow_duplicate=True),   #updating dcc.Location
    Output('link-1', 'active'),
    Input('link-1', 'n_clicks'),
    prevent_initial_call=True
)

Get our required result.

Well We have successfully achieved the desired result.

Conclusion

NavLink is a powerful tool for enhancing navigation in web applications. By incorporating NavLink components, developers can create intuitive and interactive navigation experiences for users. Despite encountering challenges with the active state and the use of properties like n_clicks and href together, we were able to overcome these obstacles and achieve the desired functionality.

By leveraging NavLink’s active property, customizing the visual appearance of active links, and utilizing dcc.Location for dynamic link updates, we have successfully implemented NavLink within our application. This has resulted in improved user experiences, as users can now easily identify their current location within the application and navigate seamlessly between different pages.

One can view the above final app by visiting the following link . I hope you’ve found this guide informative and helpful in creating a visually appealing dashboard with Dash.

Please feel free to leave a comment below. Any suggestions or questions will help us improve future content and better serve your needs. Thank you for reading and a clap will not hurt, isn’t it?