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.