DEV Community

flfljh
flfljh

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

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)
  }
}
Enter fullscreen mode Exit fullscreen mode

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%')
  }
}
Enter fullscreen mode Exit fullscreen mode

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%')
  }
}
Enter fullscreen mode Exit fullscreen mode

Customization Options

  1. Custom Icons: Pass backImg property with image path 
   NavBar({ 
     title: 'Settings',
     backImg: Utils.getImgPath('icons/custom_back.png')
   })
Enter fullscreen mode Exit fullscreen mode
  1. Custom Background: Change header color 
   NavBar({ 
     title: 'Profile', 
     bgColor: '#F5F5F5'
   })
Enter fullscreen mode Exit fullscreen mode
  1. Custom Back Action: Override default navigation 
   NavBar({
     title: 'Checkout',
     customBack: () => { /* Custom logic */ }
   })
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)