diff --git a/docs/README.md b/docs/README.md
index a3fb7ce0d4..4f03bdb13a 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -81,11 +81,12 @@ for more information about installing and using the source code.
A collection of Angular components for generic use.
-| Name | Description |
-|---------------------------------------------------|------------------------------|
-| [Avatar](core/components/avatar.component.md) | Displays user avatars. |
-| [Button](core/components/button.component.md) | A standard button component. |
-| [Progress](core/components/progress.component.md) | A progress bar component. |
+| Name | Description |
+|---------------------------------------------------|-------------------------------------------------|
+| [Avatar](core/components/avatar.component.md) | Displays user avatars. |
+| [Button](core/components/button.component.md) | A standard button component. |
+| [Progress](core/components/progress.component.md) | A progress bar component. |
+| [Header](core/components/adf-header.component.md) | A simple reusable application header component. |
### Components
diff --git a/docs/core/components/adf-header.component.md b/docs/core/components/adf-header.component.md
new file mode 100644
index 0000000000..60de5710ba
--- /dev/null
+++ b/docs/core/components/adf-header.component.md
@@ -0,0 +1 @@
+../../../lib/core/src/lib/header/header.component.md
diff --git a/lib/core/src/lib/header/docs-images/adf-header-extended.png b/lib/core/src/lib/header/docs-images/adf-header-extended.png
new file mode 100644
index 0000000000..73e1d36adf
Binary files /dev/null and b/lib/core/src/lib/header/docs-images/adf-header-extended.png differ
diff --git a/lib/core/src/lib/header/docs-images/adf-header-minimal.png b/lib/core/src/lib/header/docs-images/adf-header-minimal.png
new file mode 100644
index 0000000000..e08322b6be
Binary files /dev/null and b/lib/core/src/lib/header/docs-images/adf-header-minimal.png differ
diff --git a/lib/core/src/lib/header/header.component.html b/lib/core/src/lib/header/header.component.html
new file mode 100644
index 0000000000..6a0e5ba6c6
--- /dev/null
+++ b/lib/core/src/lib/header/header.component.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/core/src/lib/header/header.component.md b/lib/core/src/lib/header/header.component.md
new file mode 100644
index 0000000000..9e00e3fc94
--- /dev/null
+++ b/lib/core/src/lib/header/header.component.md
@@ -0,0 +1,132 @@
+# Header Component
+
+`standalone`, `component`
+
+The Header component is a versatile component used to display a header section in applications. It supports various configurations including minimal and extended variants, customizable logo, title, and navigation items.
+
+## Usage
+
+Displaying a minimal header with a logo and navbar:
+
+```html
+
+
+```
+
+Toolbar actions can be added to the header by placing them inside an element with the `adf-toolbar-actions` attribute.
+
+```html
+
+
+
+```
+
+
+
+Displaying an extended header with toolbar actions:
+
+```html
+
+
+
Secondary
+
Primary
+
+
+
+
+
+
+ ...
+
+
+
+
+
+ ...
+
+
+```
+
+
+
+## API
+
+Import the following standalone components:
+
+```typescript
+import { HeaderComponent } from '@alfresco/adf-core';
+```
+
+## Properties
+
+| Name | Type | Default | Description |
+|----------------|-----------------|--------------|------------------------------------------------------------|
+| `variant` | `HeaderVariant` | `minimal` | The variant of the header. Can be `minimal` or `extended`. |
+| `headerHeight` | `string` | `100%` | The height of the header. |
+| `logoSrc` | `string` | | The URL of the logo to display. |
+| `logoAlt` | `string` | | The alt text for the logo. |
+| `logoHeight` | `string` | `36px` | The height of the logo. |
+| `logoWidth` | `string` | `logoHeight` | The width of the logo. |
+| `title` | `string` | | The title to display in the header. |
+| `color` | `ThemePalette` | | The theme color palette for the header. |
+| `navbarItems` | `NavbarItem[]` | `[]` | Navigation items to display in the header. |
+
+## Theming
+
+The following CSS classes are available for theming:
+
+| Name | Description |
+|-----------------------|-------------------------------------|
+| `adf-header` | The host element. |
+| `adf-toolbar` | The toolbar element (single row). |
+| `adf-toolbar-title` | The toolbar title element. |
+| `adf-toolbar-logo` | The logo element inside the header. |
+| `adf-toolbar-actions` | Toolbar actions container. |
+
+### CSS Variables
+
+| Name | Description |
+|-----------------------------------|---------------------------------------------------|
+| `--adf-header-width` | The width of the header. |
+| `--adf-header-height` | The height of the header. |
+| `--adf-toolbar-width` | The width of the toolbar. |
+| `--adf-toolbar-height` | The height of the toolbar. |
+| `--adf-toolbar-title-width` | The width of the toolbar title. |
+| `--adf-toolbar-title-font-size` | The size of the title font. |
+| `--adf-toolbar-title-font-weight` | The wight of the title font. |
+| `--adf-toolbar-title-color` | The color of the title font. |
+| `--adf-toolbar-title-gap` | The gap of the toolbar title. |
+| `--adf-toolbar-title-gap` | The gap of the toolbar title. |
+| `--adf-header-logo-height` | The height of the logo within the header. |
+| `--adf-header-logo-width` | The width of the logo within the header. |
+| `--adf-toolbar-actions-gap` | The gap of the toolbar actions within the header. |
+
+## See Also
+
+- [Navbar component](./navbar/navbar.component.md)
+- [Navbar Item component](./navbar/navbar-item.component.md)
+- [Avatar component](../avatar/avatar.component.md)
+- [Button component](../button/button.component.md)
diff --git a/lib/core/src/lib/header/header.component.scss b/lib/core/src/lib/header/header.component.scss
new file mode 100644
index 0000000000..0e1eb24b8d
--- /dev/null
+++ b/lib/core/src/lib/header/header.component.scss
@@ -0,0 +1,36 @@
+.adf-header {
+ display: flex;
+ flex-direction: column;
+ width: var(--adf-header-width, 100%);
+ height: var(--adf-header-height, 100%);
+
+ .adf-toolbar {
+ width: var(--adf-toolbar-width, 100%);
+ height: var(--adf-toolbar-height, 100%);
+
+ .adf-toolbar-title {
+ width: var(--adf-toolbar-title-width, 100%);
+ align-items: center;
+ font-size: var(--adf-toolbar-title-font-size, 16px);
+ font-weight: var(--adf-toolbar-title-font-weight, 500);
+ color: var(--adf-toolbar-title-color, #000);
+ gap: var(--adf-toolbar-title-gap, 25px);
+ }
+
+ .adf-toolbar-logo {
+ height: var(--adf-header-logo-height, 36px);
+ width: var(--adf-header-logo-width, --adf-header-logo-height);
+ }
+
+ .adf-toolbar-actions > * {
+ display: flex;
+ align-items: center;
+ gap: var(--adf-toolbar-actions-gap, 10px);
+ }
+
+ .adf-toolbar-container.adf-toolbar-container-row {
+ height: 100%;
+ column-gap: 10px;
+ }
+ }
+}
diff --git a/lib/core/src/lib/header/header.component.spec.ts b/lib/core/src/lib/header/header.component.spec.ts
new file mode 100644
index 0000000000..a7f9e86dd2
--- /dev/null
+++ b/lib/core/src/lib/header/header.component.spec.ts
@@ -0,0 +1,109 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+ let component: HeaderComponent;
+ let fixture: ComponentFixture;
+
+ const getLogoImgElement = () => fixture.nativeElement.querySelector('.adf-toolbar-logo');
+ const getTitleElement = () => fixture.nativeElement.querySelector('.adf-toolbar-title');
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CommonModule, HeaderComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(HeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should have default variant as "minimal"', () => {
+ expect(component.variant).toEqual('minimal');
+ });
+
+ it('should update title width based on variant', () => {
+ component.variant = 'extended';
+ fixture.detectChanges();
+ expect(fixture.nativeElement.style.getPropertyValue('--adf-toolbar-title-width')).toBe('100%');
+
+ component.variant = 'minimal';
+ fixture.detectChanges();
+ expect(fixture.nativeElement.style.getPropertyValue('--adf-toolbar-title-width')).toBe('auto');
+ });
+
+ it('should set correct logoSrc when provided', () => {
+ const testLogoSrc = 'https://example.com/new-logo.png';
+ component.logoSrc = testLogoSrc;
+ fixture.detectChanges();
+ expect(getLogoImgElement().src).toEqual(testLogoSrc);
+ });
+
+ it('should set correct logoAlt when provided', () => {
+ const testLogoAlt = 'New Logo';
+ component.logoAlt = testLogoAlt;
+ component.logoSrc = 'test.png';
+ fixture.detectChanges();
+ expect(getLogoImgElement().getAttribute('alt')).toEqual(testLogoAlt);
+ });
+
+ it('should set correct logo height and width when provided', () => {
+ const logoHeight = '50px';
+ const logoWidth = '100px';
+ component.logoSrc = 'test.png';
+ component.logoHeight = logoHeight;
+ component.logoWidth = logoWidth;
+ fixture.detectChanges();
+ const style = getComputedStyle(getLogoImgElement());
+ expect(style.height).toEqual(logoHeight);
+ expect(style.width).toEqual(logoWidth);
+ });
+
+ it('should set correct title when provided', () => {
+ const title = 'Test Title';
+ component.variant = 'extended';
+ component.title = title;
+ fixture.detectChanges();
+ expect(getTitleElement().textContent).toEqual(title);
+ });
+
+ it('should not display title if variant = minimal', () => {
+ const title = 'Test Title';
+ component.variant = 'minimal';
+ component.title = title;
+ fixture.detectChanges();
+ expect(getTitleElement().textContent).toBeFalsy();
+ });
+
+ it('should not display logo if src is not provided', () => {
+ component.logoSrc = '';
+ fixture.detectChanges();
+ expect(getLogoImgElement()).toBeFalsy();
+ });
+
+ it('should set correct header height if provided', () => {
+ const headerHeight = '150px';
+ component.headerHeight = headerHeight;
+ fixture.detectChanges();
+ const style = getComputedStyle(fixture.nativeElement);
+ expect(style.height).toEqual(headerHeight);
+ });
+});
diff --git a/lib/core/src/lib/header/header.component.ts b/lib/core/src/lib/header/header.component.ts
new file mode 100644
index 0000000000..f149355f59
--- /dev/null
+++ b/lib/core/src/lib/header/header.component.ts
@@ -0,0 +1,70 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ThemePalette } from '@angular/material/core';
+import { ToolbarModule } from '../toolbar';
+import { NavbarItem } from './navbar/navbar-item.component';
+import { NavbarComponent } from './navbar/navbar.component';
+
+export type HeaderVariant = 'minimal' | 'extended';
+
+@Component({
+ selector: 'adf-header',
+ standalone: true,
+ imports: [CommonModule, ToolbarModule, NavbarComponent],
+ templateUrl: './header.component.html',
+ styleUrls: ['./header.component.scss'],
+ host: { class: 'adf-header' },
+ encapsulation: ViewEncapsulation.None
+})
+export class HeaderComponent {
+ @Input() variant: HeaderVariant = 'minimal';
+
+ @HostBinding('style.--adf-toolbar-title-width')
+ get width() {
+ return this.variant === 'extended' ? '100%' : 'auto';
+ }
+
+ @HostBinding('style.--adf-header-height')
+ @Input()
+ headerHeight = getComputedStyle(document.documentElement).getPropertyValue('--adf-header-height');
+
+ @Input()
+ logoSrc: string;
+
+ @Input()
+ logoAlt: string;
+
+ @HostBinding('style.--adf-header-logo-height')
+ @Input()
+ logoHeight = getComputedStyle(document.documentElement).getPropertyValue('--adf-header-logo-height');
+
+ @HostBinding('style.--adf-header-logo-width')
+ @Input()
+ logoWidth = getComputedStyle(document.documentElement).getPropertyValue('--adf-header-logo-width');
+
+ @Input()
+ title: string;
+
+ @Input()
+ color: ThemePalette;
+
+ @Input()
+ navbarItems: NavbarItem[] = [];
+}
diff --git a/lib/core/src/lib/header/index.ts b/lib/core/src/lib/header/index.ts
new file mode 100644
index 0000000000..54beb1a252
--- /dev/null
+++ b/lib/core/src/lib/header/index.ts
@@ -0,0 +1,18 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './public-api';
diff --git a/lib/core/src/lib/header/navbar/navbar-item.component.html b/lib/core/src/lib/header/navbar/navbar-item.component.html
new file mode 100644
index 0000000000..1ac702342d
--- /dev/null
+++ b/lib/core/src/lib/header/navbar/navbar-item.component.html
@@ -0,0 +1,10 @@
+{{ label }}
+
+
+
+ {{ label }}
+
+
diff --git a/lib/core/src/lib/header/navbar/navbar-item.component.md b/lib/core/src/lib/header/navbar/navbar-item.component.md
new file mode 100644
index 0000000000..ab8696e0ba
--- /dev/null
+++ b/lib/core/src/lib/header/navbar/navbar-item.component.md
@@ -0,0 +1,83 @@
+# Navbar Item Component
+
+`standalone`, `component`
+
+The Navbar Item component is a subcomponent of the [Navbar](./navbar.component.md) component, designed to represent individual navigation links or actions within the Navbar. It can be used to navigate to different sections of the application or to perform specific actions.
+
+## Usage
+
+Adding a navbar item to navigate to the home page:
+
+```html
+;
+ let button: HTMLElement;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [NavbarItemComponent, RouterTestingModule]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(NavbarItemComponent);
+ component = fixture.componentInstance;
+ component.label = 'Test Label';
+ component.routerLink = '/expected-route';
+ fixture.detectChanges();
+
+ button = fixture.nativeElement.querySelector('.adf-navbar-item-btn');
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should display label', () => {
+ fixture.detectChanges();
+ expect(button.textContent).toContain('Test Label');
+ });
+
+ it('should bind routerLink', () => {
+ fixture.detectChanges();
+ expect(button.getAttribute('ng-reflect-router-link')).toEqual('/expected-route');
+ });
+});
diff --git a/lib/core/src/lib/header/navbar/navbar-item.component.ts b/lib/core/src/lib/header/navbar/navbar-item.component.ts
new file mode 100644
index 0000000000..e4eb7c814b
--- /dev/null
+++ b/lib/core/src/lib/header/navbar/navbar-item.component.ts
@@ -0,0 +1,40 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+export interface NavbarItem {
+ label: string;
+ routerLink?: string;
+}
+
+@Component({
+ selector: 'adf-navbar-item',
+ standalone: true,
+ templateUrl: 'navbar-item.component.html',
+ styleUrls: ['./navbar-item.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ imports: [MatButtonModule, CommonModule, RouterModule],
+ host: { class: 'adf-navbar-item' }
+})
+export class NavbarItemComponent {
+ @Input() label: string;
+ @Input() routerLink?: string;
+}
diff --git a/lib/core/src/lib/header/navbar/navbar.component.html b/lib/core/src/lib/header/navbar/navbar.component.html
new file mode 100644
index 0000000000..19a5676313
--- /dev/null
+++ b/lib/core/src/lib/header/navbar/navbar.component.html
@@ -0,0 +1,5 @@
+
+
+;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CommonModule, RouterModule.forRoot([]), MatButtonModule, NavbarComponent]
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(NavbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should render correct number of navbar items', () => {
+ const testItems = [
+ { label: 'Home', routerLink: '/home' },
+ { label: 'About', routerLink: '/about' }
+ ];
+ component.items = testItems;
+ fixture.detectChanges();
+ const renderedItems = fixture.nativeElement.querySelectorAll('.adf-navbar-item-btn');
+ expect(renderedItems.length).toBe(testItems.length);
+ });
+
+ it('should render navbar items with correct label and router-link', () => {
+ const testItems = [
+ { label: 'Home', routerLink: '/home' },
+ { label: 'About', routerLink: '/about' }
+ ];
+ component.items = testItems;
+ fixture.detectChanges();
+ const renderedItems = fixture.nativeElement.querySelectorAll('.adf-navbar-item-btn');
+ testItems.forEach((item, index) => {
+ expect(renderedItems[index].textContent).toContain(item.label);
+ expect(renderedItems[index].getAttribute('ng-reflect-router-link')).toContain(item.routerLink);
+ });
+ });
+});
diff --git a/lib/core/src/lib/header/navbar/navbar.component.ts b/lib/core/src/lib/header/navbar/navbar.component.ts
new file mode 100644
index 0000000000..6a8f4e5ca3
--- /dev/null
+++ b/lib/core/src/lib/header/navbar/navbar.component.ts
@@ -0,0 +1,35 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { CommonModule } from '@angular/common';
+import { NavbarItem, NavbarItemComponent } from './navbar-item.component';
+
+@Component({
+ selector: 'adf-navbar',
+ standalone: true,
+ templateUrl: './navbar.component.html',
+ styleUrls: ['./navbar.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ imports: [MatToolbarModule, CommonModule, NavbarItemComponent],
+ host: { class: 'adf-navbar' }
+})
+export class NavbarComponent {
+ @Input()
+ items: NavbarItem[] = [];
+}
diff --git a/lib/core/src/lib/header/public-api.ts b/lib/core/src/lib/header/public-api.ts
new file mode 100644
index 0000000000..cf3b343390
--- /dev/null
+++ b/lib/core/src/lib/header/public-api.ts
@@ -0,0 +1,20 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './header.component';
+export * from './navbar/navbar.component';
+export * from './navbar/navbar-item.component';
diff --git a/lib/core/src/public-api.ts b/lib/core/src/public-api.ts
index 6c2bf9d0c8..645edf1c46 100644
--- a/lib/core/src/public-api.ts
+++ b/lib/core/src/public-api.ts
@@ -21,6 +21,7 @@ export * from './lib/button/button.component';
export * from './lib/progress/progress.component';
export * from './lib/viewer/index';
export * from './lib/toolbar/index';
+export * from './lib/header/index';
export * from './lib/pagination/index';
export * from './lib/login/index';
export * from './lib/language-menu/index';