# 📣 Dash Mantine Components 2.7.0 release

**URL:** <https://community.plotly.com/t/dash-mantine-components-2-7-0-release/96920>\
**Category:** Dash Python\
**Created:** [May 4, 2026, 3:33pm UTC](https://community.plotly.com/t/dash-mantine-components-2-7-0-release/96920 "2026-05-04T15:33:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [May 4, 2026, 3:33pm UTC](https://community.plotly.com/t/dash-mantine-components-2-7-0-release/96920/1 "2026-05-04T15:33:19Z")

</div>

**Dash Mantine Components v2.7.0 is out!** 🚀

- New `active` modes for `NavLink` handle styling automatically based on the URL—including query strings—no Dash callbacks required.

- Ability pass more HTML attributes to button components with the new property `buttonProps`

- This is the final update for the upstream Mantine v8 library (8.3.18).

**Note:** While Mantine v9 is now available, DMC v2.x remains built on v8. Be sure to use the [Mantine v8 docs](https://v8.mantine.dev/) for upstream reference!

* * *

### NavLink active improvements

The `active` prop in `NavLink` controls whether a link is highlighted as active. It can be set manually (True/False)  
or automatically based on the current URL.

Two new `active` modes were added in this release:

#### active=“exact-with-search”

This mode matches the current route using both the pathname and the query string. It is ideal when query parameters  
define the page content.

Example:  
`/products?category=shoes` will not match `/products?category=hats`.

#### active=“children”

Sets the parent `NavLink` as active when any of its child links are active. This is useful for nested navigation, where  
the parent should reflect the active state of its child links.

### NavLink Example with a multi-page app

This example uses [Dash Pages](https://dash.plotly.com/urls) to create a simple multi-page app. For simplicity, all  
pages are defined in a single file instead of separate folders.

It demonstrates `active="exact-with-search"` with query strings and shows how `active="children"` keeps a parent link  
active when a child route is selected.

 ![dmc-navlink-active](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/d/adc398abaab5c7f5e58c991c92206fbd87e83d47.png)

```python
import dash
import dash_mantine_components as dmc

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

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

dash.register_page("home", path="/", layout=dmc.Box("Home"))
dash.register_page("reports", path="/reports", layout=reports_layout)
dash.register_page("settings", path="/settings", layout=dmc.Box("Settings"))

nav = dmc.Box([
    dmc.NavLink(label="Home", href="/", active="exact"),
    dmc.NavLink(
        label="Reports",
        active="children",
        childrenOffset=28,
        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"),
])

app.layout = dmc.MantineProvider(
    dmc.AppShell(
        [
            dmc.AppShellNavbar(nav),
            dmc.AppShellMain(dash.page_container),
        ],
        padding="xl",
        navbar={"width": 300},
    )
)

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

```

### buttonProps

Pass props directly to the underlying `<button>` element. Available on `Button`, `ActionIcon`, `UnstyledButton`, and `CopyButton`.

Props are applied to the underlying `<button>` element rather than the wrapper component. This is intended for native  
attributes such as `type`, `name`, `form`, or `aria-*`. Component-level props like `color` and `variant` should still  
be set directly on the DMC component itself.

#### Examples

Using `buttonProps` ensures attributes like `type="submit"` are applied to the native element:

```python
html.Form(
    [..., dmc.Button("Submit", buttonProps={"type": "submit"})],
    method="dialog",
)

```

### Thanks

Special thanks to [@alexcjohnson](https://github.com/alexcjohnson) for your helpful feedback during code reviews.

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [May 5, 2026, 1:51pm UTC](https://community.plotly.com/t/dash-mantine-components-2-7-0-release/96920/2 "2026-05-05T13:51:51Z")

</div>