[ACS-8249][ACS-8250] UI-header component (#9971)

2025-05-12 17:04:57 +00:00 · 2024-07-25 14:42:46 +02:00 · 2024-07-25 14:42:46 +02:00 · 63d017350d
commit 63d017350d
parent dc444cfaa4
22 changed files with 788 additions and 5 deletions
--- 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

--- a/docs/core/components/adf-header.component.md
+++ b/docs/core/components/adf-header.component.md
@ -0,0 +1 @@
+../../../lib/core/src/lib/header/header.component.md
--- a/lib/core/src/lib/header/docs-images/adf-header-extended.png
+++ b/lib/core/src/lib/header/docs-images/adf-header-extended.png
--- a/lib/core/src/lib/header/docs-images/adf-header-minimal.png
+++ b/lib/core/src/lib/header/docs-images/adf-header-minimal.png
--- a/lib/core/src/lib/header/header.component.html
+++ b/lib/core/src/lib/header/header.component.html
@ -0,0 +1,43 @@
+<ng-container [ngSwitch]="variant">
+    <ng-container *ngSwitchCase="'minimal'">
+        <adf-toolbar [color]="color">
+            <adf-toolbar-title>
+                <ng-container *ngTemplateOutlet="toolbarTitleContent"></ng-container>
+            </adf-toolbar-title>
+            <ng-container *ngTemplateOutlet="navbarTemplate"></ng-container>
+            <div class="adf-toolbar--spacer"></div>
+            <ng-container *ngTemplateOutlet="toolbarActions"></ng-container>
+        </adf-toolbar>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="'extended'">
+        <adf-toolbar [color]="color">
+            <adf-toolbar-title>
+                <ng-container *ngTemplateOutlet="toolbarTitleContent"></ng-container>
+            </adf-toolbar-title>
+            <ng-container *ngTemplateOutlet="toolbarActions"></ng-container>
+        </adf-toolbar>
+        <adf-toolbar [color]="color">
+            <ng-container *ngTemplateOutlet="navbarTemplate"></ng-container>
+        </adf-toolbar>
+    </ng-container>
+</ng-container>
+
+<ng-template #toolbarTitleContent>
+    <img *ngIf="logoSrc" [src]="logoSrc" [alt]="logoAlt" class="adf-toolbar-logo"/>
+    <span *ngIf="variant==='extended'">{{ title }}</span>
+</ng-template>
+
+<ng-template #toolbarActions>
+    <div class="adf-toolbar-actions">
+        <ng-content select="[adf-toolbar-actions]"></ng-content>
+    </div>
+</ng-template>
+
+<ng-template #navbarTemplate>
+    <adf-navbar [items]="navbarItems">
+        <ng-content select="adf-navbar-item"></ng-content>
+    </adf-navbar>
+</ng-template>
+
+
--- a/lib/core/src/lib/header/header.component.md
+++ 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
+<adf-header
+    variant="minimal"
+    headerHeight="64px"
+    color="primary"
+    [logoSrc]="src"
+    [logoAlt]="alt"
+    [logoHeight]="logoHeight"
+    [logoWidth]="logoWidth"
+    [title]="title"
+    [navbarItems]="items"
+>
+</adf-header>
+```
+
+Toolbar actions can be added to the header by placing them inside an element with the `adf-toolbar-actions` attribute.
+
+```html
+<adf-header
+    variant="minimal"
+    [logoSrc]="src"
+    [title]="title"
+    [navbarItems]="items"
+>
+    <div adf-toolbar-actions>
+        <adf-toolbar-divider></adf-toolbar-divider>
+        <adf-button variant="icon" icon="search" (click)="onSearchClick()"></adf-button>
+        <adf-avatar [src]="src"></adf-avatar>
+    </div>
+</adf-header>
+```
+
+![adf-header-extended.png](docs-images/adf-header-minimal.png)
+
+Displaying an extended header with toolbar actions:
+
+```html
+<adf-header variant="extended" [logoSrc]="src" [title]="title" [navbarItems]="items">
+    <div adf-toolbar-actions>
+        <adf-button variant="flat">Secondary</adf-button>
+        <adf-button variant="flat" color="accent">Primary</adf-button>
+
+        <adf-toolbar-divider></adf-toolbar-divider>
+
+        <adf-button variant="icon" icon="search"></adf-button>
+        <adf-button variant="icon" [matMenuTriggerFor]="menu" icon="apps"></adf-button>
+        <mat-menu #menu="matMenu">
+            ...
+        </mat-menu>
+        
+        <adf-avatar
+            initials="HU"
+            cursor="pointer"
+            [matMenuTriggerFor]="userMenu">
+        </adf-avatar>
+        <mat-menu #userMenu="matMenu">
+            ...
+        </mat-menu>
+    </div>
+</adf-header>
+```
+
+![adf-header-extended.png](docs-images/adf-header-extended.png)
+
+## 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)
--- a/lib/core/src/lib/header/header.component.scss
+++ 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;
+        }
+    }
+}
--- a/lib/core/src/lib/header/header.component.spec.ts
+++ 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<HeaderComponent>;
+
+    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);
+    });
+});
--- a/lib/core/src/lib/header/header.component.ts
+++ 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[] = [];
+}
--- a/lib/core/src/lib/header/index.ts
+++ 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';
--- a/lib/core/src/lib/header/navbar/navbar-item.component.html
+++ b/lib/core/src/lib/header/navbar/navbar-item.component.html
@ -0,0 +1,10 @@
+<button *ngIf="routerLink; else noRouterLink" class="adf-navbar-item-btn"
+        [routerLink]="routerLink"
+        routerLinkActive="adf-navbar-item-active"
+        mat-button>{{ label }}
+</button>
+<ng-template #noRouterLink>
+    <button class="adf-navbar-item-btn" mat-button>
+        {{ label }}
+    </button>
+</ng-template>
--- a/lib/core/src/lib/header/navbar/navbar-item.component.md
+++ 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
+<adf-navbar-item routerLink="/home" label="Home"></adf-navbar-item>
+```
+
+Adding a navbar item that triggers an action:
+
+```html
+<adf-navbar-item (click)="doSomething()" label="Action"></adf-navbar-item>
+```
+
+## API
+
+Import the Navbar Item component:
+
+```typescript
+import { NavbarItemComponent } from '@alfresco/adf-core';
+```
+
+## Properties
+
+| Name         | Type     | Default | Description                                   |
+|--------------|----------|---------|-----------------------------------------------|
+| `label`      | `string` |         | The text label of the navbar item.            |
+| `routerLink` | `string` |         | The router link the navbar item navigates to. |
+
+## Theming
+
+The following CSS classes are available for theming:
+
+### CSS Classes
+
+| Name                     | Description                                |
+|--------------------------|--------------------------------------------|
+| `adf-navbar-item`        | The host element for the navbar item.      |
+| `adf-navbar-item-btn`    | The button element within the navbar item. |
+| `adf-navbar-item-active` | The class applied to a selected item.      |
+
+### CSS Variables
+
+| Name                                      | Description                                          |
+|-------------------------------------------|------------------------------------------------------|
+| `--adf-navbar-btn-height`                 | The height of the navbar button.                     |
+| `--adf-navbar-btn-background-color`       | The background color of the navbar button.           |
+| `--adf-navbar-btn-font-size`              | The font size of the navbar button.                  |
+| `--adf-navbar-btn-font-weight`            | The font weight of the navbar button.                |
+| `--adf-navbar-btn-color`                  | The font color of the navbar button.                 |
+| `--adf-navbar-btn-opacity`                | The opacity of the navbar button.                    |
+| `--adf-navbar-selected-btn-border-radius` | The border radius of a selected navbar button.       |
+| `--adf-navbar-selected-btn-opacity`       | The opacity of a selected navbar button.             |
+| `--adf-navbar-selected-btn-border-bottom` | The border bottom style of a selected navbar button. |
+
+# NavbarItem Interface
+
+The `NavbarItem` interface defines the structure for items used within the Navbar component.
+
+```typescript
+export interface NavbarItem {
+    label: string;
+    routerLink?: string;
+}
+```
+
+## Properties
+
+| Name       | Type     | Description                                   |
+|------------|----------|-----------------------------------------------|
+| label      | `string` | The text label of the navbar item.            |
+| routerLink | `string` | The router link the navbar item navigates to. |
+
+## See Also
+
+-   [Navbar component](./navbar.component.md)
+-   [Header component](../header.component.md)
--- a/lib/core/src/lib/header/navbar/navbar-item.component.scss
+++ b/lib/core/src/lib/header/navbar/navbar-item.component.scss
@ -0,0 +1,19 @@
+.adf-navbar-item {
+    .adf-navbar-item-btn {
+        height: var(--adf-navbar-btn-height, 100%);
+        background-color: var(--adf-navbar-btn-background-color, inherit);
+        font-size: var(--adf-navbar-btn-font-size, 16px);
+        font-weight: var(--adf-navbar-btn-font-weight, 500);
+        color: var(--adf-navbar-btn-color, #000);
+        opacity: var(--adf-navbar-btn-opacity, 0.48);
+        box-sizing: border-box;
+        border-bottom: 3px solid transparent;
+        border-top: 3px solid transparent;
+    }
+
+    .adf-navbar-item-active {
+        border-radius: var(--adf-navbar-selected-btn-border-radius, 0);
+        opacity: var(--adf-navbar-selected-btn-opacity, 1);
+        border-bottom: var(--adf-navbar-selected-btn-border-bottom, 3px solid black);
+    }
+}
--- a/lib/core/src/lib/header/navbar/navbar-item.component.spec.ts
+++ b/lib/core/src/lib/header/navbar/navbar-item.component.spec.ts
@ -0,0 +1,54 @@
+/*!
+ * @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 { RouterTestingModule } from '@angular/router/testing';
+import { NavbarItemComponent } from './navbar-item.component';
+
+describe('NavbarItemComponent', () => {
+    let component: NavbarItemComponent;
+    let fixture: ComponentFixture<NavbarItemComponent>;
+    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');
+    });
+});
--- a/lib/core/src/lib/header/navbar/navbar-item.component.ts
+++ 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;
+}
--- a/lib/core/src/lib/header/navbar/navbar.component.html
+++ b/lib/core/src/lib/header/navbar/navbar.component.html
@ -0,0 +1,5 @@
+<adf-navbar-item *ngFor="let item of items"
+                 [routerLink]="item.routerLink"
+                 [label]="item.label">
+</adf-navbar-item>
+<ng-content></ng-content>
--- a/lib/core/src/lib/header/navbar/navbar.component.md
+++ b/lib/core/src/lib/header/navbar/navbar.component.md
@ -0,0 +1,40 @@
+# Navbar Component
+
+`standalone`, `component`
+
+The Navbar component is designed to provide a navigational tool for your application. It allows for the inclusion of links, buttons, and other elements to facilitate user navigation throughout the application.
+
+## Usage
+
+Creating a simple navbar with navigation items:
+
+```html
+<adf-navbar [items]="navItems"></adf-navbar>
+```
+
+## API
+
+Import the following standalone components:
+
+```typescript
+import { NavbarComponent, NavbarItemComponent } from '@alfresco/adf-core';
+```
+
+## Properties
+
+| Name       | Type           | Default | Description                     |
+|------------|----------------|---------|---------------------------------|
+| `items`    | `NavbarItem[]` | `[]`    | Items to display in the navbar. |
+
+## Theming
+
+The following CSS classes are available for theming:
+
+| Name                   | Description                        |
+|------------------------|------------------------------------|
+| `adf-navbar`           | The host element.                  |
+
+## See Also
+
+-   [Navbar Item component](./navbar-item.component.md)
+-   [Header component](../header.component.md)
--- a/lib/core/src/lib/header/navbar/navbar.component.scss
+++ b/lib/core/src/lib/header/navbar/navbar.component.scss
@ -0,0 +1,4 @@
+.adf-navbar {
+    height: 100%;
+    display: flex;
+}
--- a/lib/core/src/lib/header/navbar/navbar.component.spec.ts
+++ b/lib/core/src/lib/header/navbar/navbar.component.spec.ts
@ -0,0 +1,62 @@
+/*!
+ * @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 { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+    let component: NavbarComponent;
+    let fixture: ComponentFixture<NavbarComponent>;
+
+    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);
+        });
+    });
+});
--- a/lib/core/src/lib/header/navbar/navbar.component.ts
+++ 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[] = [];
+}
--- a/lib/core/src/lib/header/public-api.ts
+++ 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';
--- 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';
				`@ -0,0 +1 @@`
				`../../../lib/core/src/lib/header/header.component.md`