Building Dashboard using Dash — Responsive Navbar Part — 1

Responsive NavBar

Introduction

A dashboard is a tool used to display important information in a concise and organized manner. It is commonly used by businesses and organizations to monitor and analyze key performance metrics, such as sales data, website traffic, and customer engagement. The purpose of a dashboard is to provide users with a quick and easy way to understand their data, so they can make informed decisions.

The navbar, or navigation bar, is a key component of any dashboard as it allows users to easily navigate through the different pages and features of the dashboard. The navbar typically appears at the top of the page and includes links to important pages or sections of the dashboard, such as a home page, a dashboard overview, a list of reports, and a settings page.

Defining the purpose of the dashboard and the role of the navbar helps to ensure that the dashboard is user-friendly and meets the needs of its intended audience. It also helps to ensure that the dashboard is organized and easy to navigate, so users can quickly find the information they need.

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

Need

In today’s world, mobile devices are becoming more and more prevalent, with many people using their smartphones or tablets to access websites and applications. As a result, it’s crucial that the dashboard navbar is responsive and can be easily accessed on any device, whether it’s a desktop computer, a laptop, a tablet, or a smartphone.

Responsive design ensures that the navbar adapts to different screen sizes and resolutions, providing a consistent user experience across all devices. This not only makes it easier for users to navigate the dashboard, but it also improves engagement and retention rates.

Part 1 will cover creating the responsive navbar for larger screens. We will use dash and CSS to create a navbar that adjusts its layout and appearance based on the screen size.

Part 2 will cover creating a mobile-friendly version of the navbar and connecting it to the larger screen version. We will use media queries to ensure a smooth transition between the two versions.

Part 3 will focus on enhancing the rendering of the navbar. We will use the power of client-side callbacks.

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

Navbar = dmc.Navbar(
    p="md",                  #providing medium padding all side
    fixed=False,             #Setting fixed to false
    width={"base": 300},     #Initial size of navbar ie. 300px
    hidden=True,             #we want to hide for smaller screen
    hiddenBreakpoint='md',   #after past medium size navbar will be hidden.
    height='100vh',          #providing height of navbar
    id='sidebar',
    children=[
      html.Div([
              dmc.NavLink(
                  label="With icon",
                  icon=DashIconify(icon="bi:house-door-fill", height=16, color="#c2c7d0")
              ),
              dmc.NavLink(
                  opened=False,
                  label="With right section",
                  icon=DashIconify(icon="tabler:gauge", height=16, color="#c2c7d0")
                  rightSection=DashIconify(icon="tabler-chevron-right", height=16, color="#c2c7d0")
              ),
              dmc.NavLink(
                  label="Disabled",
                  icon=DashIconify(icon="tabler:circle-off", height=16, color="#c2c7d0")
                  disabled=True,
              ),
              dmc.NavLink(
                  label="With description",
                  description="Additional information",
                  icon=dmc.Badge(
                      "3", size="xs", variant="filled", color="red", w=16, h=16, p=0
                  ),
              ),
              dmc.NavLink(
                  label="Active subtle",
                  icon=DashIconify(icon="tabler:activity", height=16, color="#c2c7d0")
                  rightSection=DashIconify(icon="tabler-chevron-right", height=16, color="#c2c7d0")
                  variant="subtle",
                  active=True,
              ),
          ])
    ]
)

Step 4 We have our navbar, but it’s taking too much space and sometimes it can be distracting and make it difficult for the user to focus on the element. Let’s provide a button that allows the user to control the size of the navbar.

Btn1 =  dmc.Button(
            children=[DashIconify(icon="ci:hamburger-lg", width=24, height=24,color="#c2c7d0")],
            variant="subtle", 
            p=1,
            id='sidebar-button'
        )

#Provide style={'display':'flex'} under html.Div, then button will be beside navbar.

Step 5 After adding a button to control the size of the navbar, the next step is to assign a callback function to that button. This function will be triggered when the button is clicked and will update the size and appearance of the navbar.

@dash.callback(
    Output("sidebar", "width"),          #what we wanted to change
    Input("sidebar-button", "n_clicks"), #width will change when btn is triggered
    State('sidebar','width'),            #store inital width
    prevent_initial_call=True,
    )
def sidebar(opened, width):
    if opened:
        if width['base'] == 300:         #if initial width is 300 then return 70
            return {"base": 70}
        else:
            return {'base':300}

Step 6 As you can see problems, the distance between icons now is unequal, the chevron right is visible and if you are side-by-side coding then their transition is abrupt. Unequal distance is because of text wrapping, the chevron is visible because it exceeds the width of the navbar and for transition, we will provide the “transition” CSS property.

#under DIv that wraps all the NavLink provide this style
style={'white-space': 'nowrap'}

#under Navbar provide this style
style={'overflow':'hidden', 'transition': 'width 0.3s ease-in-out'}

Step 7 Hover effect — Adding a hover effect to a navbar can help improve the user experience and make the navigation more intuitive. For this, we will use a styles.css file, and put a hover effect on the navbar with the id “sidebar”. On hovering, navbar width will be back to 300px.

#sidebar:hover {
  width: 300px;
}

Step 8 — Now comes the colouring part, add the background-colour CSS property in the style property of the navbar.

#under Navbar provide this style
style={'overflow':'hidden', 'transition': 'width 0.3s ease-in-out', 
       'background-color':'#343a40'}

Conclusion

That’s all folks, we have successfully created a responsive navbar that works on larger screens.

In this part, we used Dash and CSS to create a navbar that adjusts its layout and appearance based on the screen size. We also added a hover effect to the navbar to make it more interactive and user-friendly.

Stay tuned for the next episode where we’ll add a mobile navbar and connect it with the current navbar.

One can view the above final visualization 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?