Make the current doc more visible in the sidebar.

[NOTMEE12]

I look at DMC docs really often and it would be nice to have a little indicator or maybe a background color change on the currently selected doc (I think that a background color change or a border would be quite nice).

This is how the docs currently look:

If I want to search on the sidebar where am I and maybe check out more components in the same category, I'll have to read all of them.

A simple change like this would be enough.

Those changes I made are just in the devtools:

background-color: var(--mantine-color-dark-5);
border-radius: var(--mantine-radius-sm);

They won't work for light mode.
The changes I made are just a proposal.

[AnnMarieW]

Hi @NOTMEE12

This is a good suggestion - thanks.

The styling would work properly in both light and dark modes by setting active=True in the dmc.NavLInk. However, currently there is no easy way to know which link should be set to active since you can navigate there by clicking on the link or by the search input, or by setting the URL.

The ideal solution would be to have the active set based on the URL - similar to how it's done with dash-bootstrap-components, but this would need to be a PR in the dmc library. Can you think of any workarounds?

Here's the dbc.Navlink https://dash-bootstrap-components.opensource.faculty.ai/docs/components/nav/

active (boolean | a value equal to: 'partial', 'exact'; default False): Apply 'active' style to this component. Set to "exact" to automatically toggle active status when the current pathname matches href, or to "partial" to automatically toggle on a partial match. Assumes that href is a relative url such as /link rather than an absolute such as https://example.com/link For example - dbc.NavLink(..., href="/my-page", active="exact") will be active on "/my-page" but not "/my-page/other" or "/random" - dbc.NavLink(..., href="/my-page", active="partial") will be active on "/my-page" and "/my-page/other" but not "/random".

[NOTMEE12]

Hi!

I've searched a little and plotly dash has a dcc.Location. It's possible to use Partial Matching on this and the dmc.NavLink (or when using pages do something with the buttons? I don't know).
I'm not 100% sure this approach would work.

[NOTMEE12]

Here's a working concept:

from dash import Dash, _dash_renderer, dcc, Output, Input, ALL, callback
_dash_renderer._set_react_version("18.2.0")
import dash_mantine_components as dmc


dash = Dash(__name__)

# this works best with IDs without spaces in them (because they will be converted)
navlinks = [f"CustomElement{i}" for i in range(20)]

dash.layout = dmc.MantineProvider(
    forceColorScheme="light",
    children=[
        dmc.AppShell([
            dmc.AppShellNavbar([
                dmc.NavLink(
                    label=navlink,
                    id={"type": "nav", "index": idx},
                    href=f"/{navlink}",
                    variant="light",
                    color="gray"
                )
                for idx, navlink in enumerate(navlinks)
            ])
        ]),
        dcc.Location(id="url")
    ]
)


@callback(
    Output({"type": "nav", "index": ALL}, "active"),
    Input("url", "pathname")
)
def update_nav(pathname: str):
    out = [False] * len(navlinks)
    idx = int(navlinks.index(pathname.lstrip("/")))
    out[idx] = True
    
    return out


dash.run()

[AnnMarieW]

Oh, yes, that's a great workaround until DMC 365 is completed. Would you like to do a PR?

[benweinberg89]

I have been using this work-around strategy in my app:
https://abhinavk910.medium.com/building-dashboard-using-dash-responsive-navlink-ed00afe76b83

[martindemker]

Instead of a seperate index counter, you can just use the URL as the index. Makes it a bit shorte.

# Create Navlinks
[
    dmc.NavLink(
        label=f"{page['name']}",
        href=page["relative_path"],
        id={"type": "navlink", "index": page["relative_path"]},
    )
    for page in page_registry.values()
]

# ...

# Callback
@app.callback(Output({"type": "navlink", "index": ALL}, "active"), Input("_pages_location", "pathname"))
def update_navlinks(pathname):
    return [control["id"]["index"] == pathname for control in callback_context.outputs_list]

[AnnMarieW]

@demk0r - are you on the dmc discord? Just wanted to mention you there 🙂