+ {breadcrumbs &&
+ breadcrumbs.map(breadcrumb => (
+
+
+ {breadcrumb.label}
+
+
+
+ ))}
{title}
- {controls}
-
-
- {breadcrumbs ? (
-
- {breadcrumbs.map((breadcrumb, index) => (
-
-
- {breadcrumb.label}
-
- {index < breadcrumbs.length - 1 && (
-
- )}
-
- ))}
-
- ) : (
-
- {title}
-
- )}
- {controls}
-
+
+ {customActions}
+ {menuItems && (
+
+ (
+ }
+ variant="tertiary"
+ />
+ )}
+ />
+
+
+
+ {menuItems.map(menuItem => (
+ menuItem.onClick?.()}
+ >
+ {menuItem.label}
+
+ ))}
+
+
+
+
+ )}
- >
+ {tabs && (
+
+
+
+ {tabs.map(tab => (
+
+ {tab.label}
+
+ ))}
+
+
+
+ )}
+
);
};
diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts
index 9a76b07aec..cda8b6d324 100644
--- a/packages/ui/src/utils/componentDefinitions.ts
+++ b/packages/ui/src/utils/componentDefinitions.ts
@@ -112,10 +112,6 @@ export const componentDefinitions = {
toolbarControls: 'bui-HeaderToolbarControls',
toolbarIcon: 'bui-HeaderToolbarIcon',
toolbarName: 'bui-HeaderToolbarName',
- breadcrumbs: 'bui-HeaderBreadcrumbs',
- breadcrumb: 'bui-HeaderBreadcrumb',
- breadcrumbLink: 'bui-HeaderBreadcrumbLink',
- breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator',
tabsWrapper: 'bui-HeaderTabsWrapper',
},
},
@@ -123,15 +119,9 @@ export const componentDefinitions = {
classNames: {
root: 'bui-HeaderPage',
content: 'bui-HeaderPageContent',
+ breadcrumbs: 'bui-HeaderPageBreadcrumbs',
tabsWrapper: 'bui-HeaderPageTabsWrapper',
controls: 'bui-HeaderPageControls',
- sticky: 'bui-HeaderPageSticky',
- stickyWrapper: 'bui-HeaderPageStickyWrapper',
- stickyContent: 'bui-HeaderPageStickyContent',
- breadcrumbs: 'bui-HeaderPageBreadcrumbs',
- breadcrumb: 'bui-HeaderPageBreadcrumb',
- breadcrumbLink: 'bui-HeaderPageBreadcrumbLink',
- breadcrumbSeparator: 'bui-HeaderPageBreadcrumbSeparator',
},
},
Heading: {
diff --git a/yarn.lock b/yarn.lock
index 9fb1faebce..99c45be567 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7473,7 +7473,6 @@ __metadata:
dependencies:
"@backstage/cli": "workspace:^"
"@base-ui-components/react": "npm:1.0.0-alpha.7"
- "@gsap/react": "npm:^2.1.2"
"@remixicon/react": "npm:^4.6.0"
"@storybook/addon-essentials": "npm:^8.6.12"
"@storybook/addon-interactions": "npm:^8.6.12"
@@ -7492,7 +7491,6 @@ __metadata:
eslint-plugin-storybook: "npm:^0.12.0"
glob: "npm:^11.0.1"
globals: "npm:^15.11.0"
- gsap: "npm:^3.13.0"
lightningcss: "npm:^1.29.1"
mini-css-extract-plugin: "npm:^2.9.2"
react: "npm:^18.0.2"
@@ -9367,16 +9365,6 @@ __metadata:
languageName: node
linkType: hard
-"@gsap/react@npm:^2.1.2":
- version: 2.1.2
- resolution: "@gsap/react@npm:2.1.2"
- peerDependencies:
- gsap: ^3.12.5
- react: ">=17"
- checksum: 10/48e78bbb31a4ec5a75aab6ea69ec3f4df0bb7cff0c8ebfcdc14553cb8e35f54b7fcf94f933e2aa65fd977135aaac87b855007d376504f1bb93a74328ba1dc0cb
- languageName: node
- linkType: hard
-
"@headlessui/react@npm:^1.7.15":
version: 1.7.17
resolution: "@headlessui/react@npm:1.7.17"
@@ -32336,13 +32324,6 @@ __metadata:
languageName: node
linkType: hard
-"gsap@npm:^3.13.0":
- version: 3.13.0
- resolution: "gsap@npm:3.13.0"
- checksum: 10/1908d51cbdf8f0bec8a69919af352d743a06529639a89f750f1c02e9a165d3ea816f867569df222ee7bfc14e23e268ebeb51dc5df0687fa7918ddd5d3b3efaec
- languageName: node
- linkType: hard
-
"gtoken@npm:^7.0.0":
version: 7.0.1
resolution: "gtoken@npm:7.0.1"