NavLink Update for Active

[BSd3v]

adding support for NavLink to set active based upon page navigation automatically:

• options for active are now boolean | 'partial' | 'exact'
• partial will care if the pathname starts with the href
• exact will display if the pathname is an exact match
• true / false will disable the matching and set true and false respectively

closes #365

[AnnMarieW]

Thanks @BSd3v

This works great! Will target merging after dmc V1 is released (and after dash 3 is released).

To do:

• Updates for V1
• Changelog
• docs
• update active docstring
• handle hash or query strings?

---

Docstrings

I think the dosctring could be a little more clear. Perhaps something like:

Apply 'active' style to the link. Set to "exact" to automatically toggle the active status when the current pathname matches href, or to "partial" to automatically toggle when the pathname starts with the href.

I like the example included in the dbc docstring, but it would be better to include it in the docs instead:

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"

Handle hash or query strings

Do you think there is a way to accommodate a link where the href includes a # or a query string?
For example:

dmc.NavLink(label="page 1", href="/page-1#subject-1", active="exact"),

---

Example App

Here's a good sample app for the release announcement and the docs. This demos nested links using the active="partial" and active="exact" to keep the parent link showing active when any of the child links are active.

import dash
import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, html
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL, use_pages=True, pages_folder="")

dash.register_page("home", path="/", layout=html.Div("I'm home"))
dash.register_page("page1", path="/page-1", layout=html.Div("Info about page 1 subjects"))
dash.register_page("page1s1", path="/page-1/sub-1", layout=html.Div("page 1 subject 1"))
dash.register_page("page1s2", path="/page-1/sub-2", layout=html.Div("page 1 subject 2"))

component = dmc.Box([
    dmc.NavLink(label="home", href="/", active="exact"),
    dmc.NavLink(
            label="Page 1",
            childrenOffset=28,
            href="/page-1",
            active="partial",
            children=[
                dmc.NavLink(label="Subject 1", href="/page-1/sub-1", active="exact"),
                dmc.NavLink(label="Subject 2", href="/page-1/sub-2", active="exact"),
            ],
    ),
    dmc.Divider(mb="lg"),
    dash.page_container
])


app.layout = dmc.MantineProvider([component])

if __name__ == "__main__":
    app.run(debug=True)