Update active navlink 2

[AnnMarieW]

Adds two features to dmc.NavLink to improve route-based active state without requiring callbacks.

1. active="children"
   closes [Feature Request] Support parent active state based on nested children NavLinks #717

• Sets parent link to active if any child link is active

Example:

dmc.NavLink(
    label="Reports",
    active="children",  
    children=[...],
)

2. active="exact-with-search"
   closes NavLink Active #678

• Marks a link as active only when both the pathname and query string match.
• Query parameters are compared after decoding and are order-insensitive.

Example:

dmc.NavLink(
    label="Sales",
    href="/reports?type=Sales",
    active="exact-with-search",
)

Additional notes

• active=True and active=False still override all matching behavior.
• Existing exact and partial modes are fixed so they ignore query parameters for match
• Click behavior for links with children is updated so they can act as non-navigable toggles when href is not provided.

Here is a complete minimal example:

import dash
import dash_mantine_components as dmc
from dash import Dash, html

app = Dash(use_pages=True, pages_folder="")


dash.register_page("home", path="/", layout=html.Div("Home"))

def reports_layout(type=None, **kwargs):
    return html.Div(f"{type} Report ")

dash.register_page("reports", path="/reports", layout=reports_layout)
dash.register_page("settings", path="/settings", layout=html.Div("Settings"))


component = dmc.Box([
    dmc.NavLink(label="Home", href="/", active="exact"),

    dmc.NavLink(
        label="Reports",
        # non-navigable parent
        active="childrenl",       
        childrenOffset=28,
        persistence=True,
        children=[
            dmc.NavLink(
                label="Sales",
                href="/reports?type=Sales",
                active="exact-with-search",
            ),
            dmc.NavLink(
                label="Inventory",
                href="/reports?type=Inventory",
                active="exact-with-search",
            ),
        ],
    ),

    dmc.NavLink(label="Settings", href="/settings", active="exact"),

    dmc.Divider(mb="lg"),
    dash.page_container
])

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

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

[alexcjohnson]

Excellent!