paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 42 Packages Projects Releases Wiki Activity

feat(ui): add automatic active tab detection to Header (#33783)

Browse Source 
* feat(ui): widen activeTabId type to accept null

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* feat(ui): add automatic active tab detection to HeaderNav

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* feat(ui): update Header stories to demonstrate auto-detection and explicit activeTabId

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* refactor(ui): remove manual useActiveTabId from PluginHeaderAndHeader recipe

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* docs(ui): update Header docs for activeTabId auto-detection

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* chore(ui): add API report and changeset for activeTabId auto-detection

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* fix(ui): resolve relative hrefs in HeaderNav tabs

Add resolveHref to HeaderNavItemDefinition so tab links with relative
hrefs are resolved against the router context before rendering.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* chore(ui): add breaking change changeset for HeaderNav resolveHref

Signed-off-by: Johan Persson <johanopersson@gmail.com>

---------

Signed-off-by: Johan Persson <johanopersson@gmail.com>
This commit is contained in:
Johan Persson
2026-04-07 17:22:01 +02:00
committed by GitHub
parent fa232da324
commit b4a187502b
11 changed files with 142 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/cold-ways-double.md
+7
View File
@@ -0,0 +1,7 @@
---
'@backstage/ui': patch
---
Added automatic active tab detection to the Header component. When `activeTabId` is omitted, the active tab is now auto-detected from the current route using `matchRoutes`. Pass an explicit `activeTabId` to override, or `null` for no active tab.
**Affected components:** Header
.changeset/header-nav-resolve-href.md
+11
View File
@@ -0,0 +1,11 @@
---
'@backstage/ui': minor
---
**BREAKING**: Tab `href` values in the Header component are now resolved through the router context instead of being passed raw to the `<a>` tag. This means relative `href` values (e.g. `sub3`, `./sub4`, `../catalog`) are now resolved against the current route, and absolute `href` values may be affected by the router's `basename` configuration.
**Migration:**
Tab navigation should work the same for absolute `href` values in most setups. If you use relative `href` values in tabs, verify they resolve as expected. If your app configures a router `basename`, check that absolute tab `href` values still navigate correctly.
**Affected components:** Header