Design and Implementation of a Flexible H5 Navigation Bar Component for Mobile Applications

In mobile web pages the navigation bar is crucial for quick access and high exposure, but native navigation bars suffer from performance, testing, extensibility, and compatibility issues, especially when used as the root view of a WebView.

The solution is a generic H5 navigation‑bar component ( @pango/navigation-bar ) that can be configured via JSON, supports SSR pre‑rendering, reduces development and testing effort, improves user experience, and works across iOS, Android, and foldable devices.

Advantages

Performance : SSR pre‑rendering enables fast screen rendering.

Low development/testing cost : Configuration‑driven items reduce code changes; the component is only 4.1 KB and published on JNPM.

Better UX : Lifecycle sync with other page sections avoids transition glitches.

Flexibility : Left, center, right regions accept React.ReactElement for custom items, icons, menus, and animations.

Device compatibility : Designed for notch, foldable, and various screen sizes using fixed PX units.

No external dependencies : Pure implementation without third‑party libraries.

Installation

Install the package from JNPM:

npm i @pango/navigation-bar --registry=http://registry.m.jd.com

Configuration Example

Define navigation items and parameters in TypeScript:

import { BACK_ICON, FEEDBACK_ICON, FEEDBACK_URL, INavigationParams, MORE_ICON, RULE_ICON, SHARE_ICON } from "@pango/navigation-bar";

const follow = { type: "follow", collectionId: String(followInfo?.themeId), gapWidth: 12, width: 55, height: 22 };

const moreItem = { type: "more", menuBackgroundColor: "white", img: MORE_ICON, title: "更多", menuList: [] };

moreItem.menuList.push({ icon: RULE_ICON, title: "规则页", menuEventData: extend?.guideUrl });

moreItem.menuList.push({ icon: SHARE_ICON, title: "分享", type: "share", menuEventData: extend?.share });

const backItem = { type: "back", img: BACK_ICON, canClick: !margicWindow, title: "返回" };

const backLogo = { type: "logo", img: DEFAULT_LOGO, isAnimation: true, gapWidth: 5, width: 176, height: 34 };

const navBarParams: INavigationParams = { leftItems: [], rightItems: [], backgroundColor: "#FD4D00", navHeight: this.status.navHeight };

navBarParams.leftItems.push(backItem, backLogo);

navBarParams.rightItems.push(moreItem, follow);

navBarParams.titleImgItem = TitleSearch({});

navBarParams.scrollCallBack = (scale) => { this.setStatus({ navigationBarParams: Object.assign(this.status.navigationBarParams, { titleImgItem: TitleSearch({ isCollapse: scale === 1 }) }) }); };

Usage in JSX

<NavigationBar className="nav-bar" params={navBarParams} barHeight={200} />

Exception Handling

Three main abnormal scenarios are addressed:

JavaScript execution errors – the component renders a fallback a tag for the back button.

WebView HTML load failure – a query parameter hideNavi=1 hides the native bar, and the WebView shows the H5 bar on failure.

Backend service errors – the same hideNavi flag triggers a default navigation bar.

Foldable Screen Adaptation

Use absolute layout with fixed PX units to keep item sizes stable across different screen ratios, and split the bar into status‑bar and navigation‑bar layers.

Open‑Source Plan

After security review the component will be open‑sourced, encouraging community contributions.

Conclusion

The @pango/navigation-bar component provides a performant, configurable, and device‑agnostic solution for mobile navigation, reducing development overhead while enhancing user experience and supporting future extensions.