Developing a Simple Universal Header Navigation Bar in HarmonyOS Next

# Developing a Simple Universal Header Navigation Bar in HarmonyOS Next

In daily page development, most pages require a header to display navigation controls and page information. Repeating this code for every page is inefficient and leads to inconsistent implementations. This guide demonstrates how to create a reusable header component.

## Step 1: Create the NavBar Component

Create a new ArkTS file with a `@Component` decorated custom component:

``` import Utils from "../../../common/utils/Utils";

@Component export struct NavBar { // Component implementation will go here } ```

## Step 2: Implement Component Properties and UI

Add properties and build the header UI:

``` import Utils from "../../../common/utils/Utils";

@Component export struct NavBar { @Prop title: string = ''; // Header title text @Prop backImg: string = ''; // Custom back button icon path @Prop bgColor: string = '#FFFFFF';// Header background color @Prop customBack?: () => void; // Custom back button handler @Prop mode: string = 'center'; // Title alignment: 'center' or 'left'

build() { Row() { // Back button section Row() { Image(this.backImg || Utils.getImgPath('home/adult_page_back_black.png')) .width(Utils.getVp(48)) .height(Utils.getVp(48)) .objectFit(ImageFit.Cover) } .onClick(() => { // Use custom handler if provided, else default back navigation this.customBack ? this.customBack() : router.back(); }) // Title section Row() { Text(this.title) .fontColor('#191B27') .fontSize(Utils.getVp(33)) .fontWeight(FontWeight.Bold) .textAlign(this.mode === 'center' ? TextAlign.Center : TextAlign.Start) .width('100%') } .margin({ left: this.mode === 'center' ? 0 : Utils.getVp(20) }) .flexShrink(1) // Allow shrinking to fit content .height('100%') } .width('100%') .padding({ left: Utils.getVp(32), right: Utils.getVp(32) }) .height(Utils.getVp(88)) .backgroundColor(this.bgColor) }

} ```

## Step 3: Using the Component in Parent Views

### Center-aligned Title Example:

``` import { NavBar } from './component/NavBar';

@Entry @Component struct ParentPage { build() { Column() { NavBar({ title: 'Page Title', mode: 'center' }) // Page content here } .width('100%') .height('100%') } } ```

### Left-aligned Title Example:

``` import { NavBar } from './component/NavBar';

@Entry @Component struct ParentPage { build() { Column() { NavBar({ title: 'Page Title', mode: 'left' }) // Page content here } .width('100%') .height('100%') } } ```

## Customization Options

1. *Custom Icons*: Pass `backImg` property with image path

``` NavBar({ title: 'Settings', backImg: Utils.getImgPath('icons/custom_back.png') }) ```

2. *Custom Background*: Change header color

``` NavBar({ title: 'Profile', bgColor: '#F5F5F5' }) ```

3. *Custom Back Action*: Override default navigation

``` NavBar({ title: 'Checkout', customBack: () => { /* Custom logic */ } }) ```

## Key Features

- *Responsive Design*: Adapts to different screen sizes using `Utils.getVp()` - *Flexible Layout*: Title alignment options (center/left) - *Customizable*: Supports custom icons, colors, and behaviors - *Consistent UI*: Ensures uniform header appearance across application - *Easy Integration*: Simple props-based configuration

This implementation provides a reusable, customizable header component that eliminates code duplication and ensures consistent navigation experiences throughout your HarmonyOS Next application.