Navigation Active State#
Overview#
Superset's top navigation bar highlights the currently active tab by comparing the browser's URL pathname against a set of hardcoded path prefixes. The entire logic lives in Menu.tsx.
How Active Tab Detection Works#
Inside the Menu component, a useEffect hook watches location.pathname (via React Router's useLocation) and maps it to an active tab name via a switch statement :
| Path prefix | Active tab key set |
|---|---|
/dashboard | Dashboards |
/chart or /explore | Charts |
/tablemodelview | Datasets |
| (anything else) | (none) |
The resulting array is passed to Ant Design's <MainNav selectedKeys={activeTabs}> , which visually highlights the matching menu item.
Key detail: The selectedKeys value must match the key prop on each <MainNav.Item> or <StyledSubMenu>. Historically those keys were the items' displayed labels — which caused silent failures whenever labels didn't match the hardcoded English strings above.
Route Path Definitions#
The canonical set of frontend routes is declared in routes.tsx. These paths directly determine what the path-prefix switch can and cannot match:
- Dashboard list:
/dashboard/list/ - Dashboard view:
/superset/dashboard/:idOrSlug/— note the/superset/prefix; the active-tab switch only checksstartsWith('/dashboard'), so opening a specific dashboard does not highlight the Dashboards nav tab. - Chart list:
/chart/list/ - Explore / chart editor:
/explore/ - Datasets:
/tablemodelview/list/ - SQL Lab:
/sqllab/— no active-tab rule in the switch covers/sqllab, so the SQL Lab tab is never highlighted by the path-prefix mechanism alone.
Known Issues and Fixes#
i18n Bug: Active Tab Not Highlighted in Non-English Locales#
Root cause: Menu item key props were set to the rendered, translated label strings. The active-tab switch compared against hardcoded English names ("Dashboards", "Charts", etc.). In any non-English locale the keys never matched, so no tab was highlighted. This affected every language with translated menu labels.
Fix (PR #41183): Key each menu item by its stable, locale-independent Flask-AppBuilder internal name field (key: name ?? label), and update the active-tab switch to set the same stable names. Custom operator-defined menu entries without a name fall back to label, preserving backward compatibility.
Path Inconsistency: /superset/dashboard/:id vs /dashboard#
Individual dashboard view routes live at /superset/dashboard/:idOrSlug/ , but the active-tab switch only checks path.startsWith('/dashboard') . Because the view URL starts with /superset/, not /dashboard/, navigating into a specific dashboard does not highlight the Dashboards nav tab. The list view (/dashboard/list/) is correctly matched.
Key Files#
| File | Purpose |
|---|---|
superset-frontend/src/features/home/Menu.tsx | Active-tab detection logic, selectedKeys wiring, menu rendering |
superset-frontend/src/views/routes.tsx | All frontend route path definitions, isFrontendRoute() helper |
isFrontendRoute Helper#
isFrontendRoute(path) in routes.tsx performs an exact key lookup (stripping query params and hash fragments) against the flat frontEndRoutes map built from routes. It is used by Menu.tsx to decide whether to render a menu link as a React Router <NavLink> (SPA navigation) or a plain <a> (full-page navigation). It is separate from the active-tab prefix matching.