Skip to content

Conversation

@jayenashar
Copy link

@jayenashar jayenashar commented Dec 18, 2025

Summary

This PR adds support for search parameters in Toolpad navigation items, addressing #4537.

Changes

  • Added searchParams property to NavigationPageItem: Navigation items can now specify URL search parameters
  • Updated Link component: Preserves search params and hash fragments during navigation
  • Implemented hierarchical searchParams merging: Child items inherit parent searchParams by default, with ability to override or clear
  • Fixed path matching: matchPath now correctly matches on pathname only, ignoring search params for active page detection
  • Added documentation: Documented the new feature in the Dashboard Layout navigation section

API Usage

const nav = [
  {
    segment: 'movies',
    searchParams: new URLSearchParams({ foo: 'bar', baz: 'quux' }),
    children: [
      {
        segment: 'lotr',
        searchParams: new URLSearchParams({ foo: 'hello' }),
        // Result: /movies/lotr?foo=hello&baz=quux (overrides foo, inherits baz)
      },
      {
        segment: 'hp',
        // Result: /movies/hp?foo=bar&baz=quux (inherits all)
      },
      {
        segment: 'dune',
        searchParams: new URLSearchParams(),
        // Result: /movies/dune (empty params clear inheritance)
      },
    ],
  },
];

Implementation Details

  • Parent searchParams are inherited by children by default
  • Child searchParams override specific parent parameters (merge behavior)
  • Empty URLSearchParams() clears all inherited parameters
  • Navigation matching ignores search params for correct active page detection
  • Hash fragments are now preserved during navigation

Testing

  • Added comprehensive test suite for navigation path building with searchParams
  • Added tests for Link component to verify search params and hash preservation
  • All new tests passing ✓

Documentation

Added a new section "Navigation with search parameters" to the Dashboard Layout documentation with usage examples and key behaviors.

Closes #4537

This change adds the ability to specify search parameters for navigation items,
addressing user requests to include query strings in navigation links.

Key changes:
- Add optional searchParams property to NavigationPageItem interface
- Update Link component to preserve search params and hash during navigation
- Implement hierarchical searchParams merging in navigation path building
- Child items inherit parent searchParams by default
- Child items can override specific parent parameters
- Empty URLSearchParams clears all inherited parameters
- matchPath now matches on pathname only, ignoring search params for correct active page detection

The implementation provides explicit control over search parameters while
supporting inheritance patterns. This allows developers to define search
parameters at parent levels that cascade to children, with children able
to override or clear those parameters as needed.

Fixes mui#4537
Add documentation for the new searchParams feature in navigation items,
including usage examples and key behaviors for parameter inheritance,
overriding, and clearing.
@Janpot
Copy link
Member

Janpot commented Dec 19, 2025

I strongly advise against opening pull requests in this repository, at the moment the team doesn't have the bandwidth to review them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Include search params in toolpad navigation

2 participants