DEV Community

陈杨
陈杨

Posted on • Edited on

Hong Mong 5 Development Treasure Case Sharing Multi-Level Navigation Bar Development Practice

✨ Hands-On Guide: Implementing Adaptive Multi-Platform Navigation in HarmonyOS ✨

Hey developers! While working on a HarmonyOS project and reviewing the official documentation, I discovered an excellent implementation solution for multi-platform hierarchical navigation. This approach elegantly solves the challenges of adapting navigation structures across different form factors like phones, tablets, and PCs - definitely worth sharing!

🚀 1. Core Solution Value: Efficient Multi-Device Adaptation

Have you encountered this pain point: A sidebar navigation that works perfectly on PC becomes cluttered on mobile screens? HarmonyOS addresses this through its Breakpoint System + Dynamic Component Composition:

  • 📱 Phones/Foldables (Portrait):

    Bottom TabBar (Primary navigation) + Top Secondary Navigation.

    Optimized for one-handed operation and vertical space efficiency.

  • 💻 PCs/2-in-1 Devices/Tablets (Landscape):

    Left Sidebar (Primary navigation) + Top Tabs (Secondary navigation).

    Provides clear information hierarchy and desktop-class efficiency.

  • 🔄 Seamless Transition:

    Built-in window size monitoring automatically switches layouts when devices rotate or screens resize (e.g., foldable unfolding). Transitions are smooth, maintaining consistent user experience.

🔧 3. Implementation: Key Code Snippets

(1) Small Screens (sm/md breakpoints) - Bottom Navigation

// Bottom tab navigation using Tabs component (Key: BarPosition.End)
Tabs({ barPosition: BarPosition.End }) { // Fixes TabBar at bottom
  TabContent() { /* Home content */ }.tabBar('Home')
  TabContent() { /* Messages */ }.tabBar('Messages')
  TabContent() { /* Profile */ }.tabBar('Profile')
}
.vertical(false) // Horizontal arrangement
.onChange((index: number) => {
  // Update main content on tab switch
  this.switchMainContent(index);
})
Enter fullscreen mode Exit fullscreen mode

​​Key Points:​​

barPosition: BarPosition.End anchors navigation to bottom
vertical(false) enables mobile-friendly horizontal layout
​​(2) Large Screens (lg/xl breakpoints) - Sidebar + Tabs​​

// Embedded sidebar layout using SideBarContainer

SideBarContainer(SideBarContainerType.Embed) {
  // Left: Primary navigation sidebar
  Column() {
    ForEach(this.firstLevelTabs, (item) => {
      NavigationItem({ // Custom nav component
        title: item.name,
        isSelected: this.currentMainTab === item.id,
        onSelected: () => this.handleMainTabSelect(item.id),
        hasSub: item.children.length > 0 // Indicates sub-items
      })
    })
  }
  .width(240) // Recommended min width

  // Right: Main content area
  Column() {
    // Top secondary navigation tabs
    Tabs() {
      ForEach(this.secondLevelTabs, (subItem) => {
        TabContent() { /* Sub-page */ }.tabBar(subItem.name)
      })
    }
    .vertical(false)
    .barWidth('100%') // Full-width tabs
    .onChange((index: number) => {
      this.currentSubTab = index;
    })

    // Content display
    ContentDisplay({ 
      currentMainTab: this.currentMainTab,
      currentSubTab: this.currentSubTab
    })
  }
}
.sideBarWidth(240) // Set sidebar width
Enter fullscreen mode Exit fullscreen mode

​​Design Recommendations:​​

​​Sidebar Width:​​ ≥240px ensures comfortable touch targets
​​Spacing:​​ Use 12px spacing between icons/text in secondary nav
​​💬 4. Implementation FAQs​​

​​Q: Layout breaks when resizing PC window to intermediate sizes​​
​​A:​​ Configure minimum window requirements in module.json5:

"abilities": [{
  ...
  "minWindowWidth": "720dp", // Prevents awkward in-between states
  "minWindowHeight": "480dp",
  ...
}]
Enter fullscreen mode Exit fullscreen mode

This forces mobile layout below threshold sizes.
​​Q: Secondary nav items don't respond to clicks​​
​​A:​​ This usually indicates state synchronization issues:
Verify you're updating the state variable (e.g., this.currentSubTab) in click handlers
For shared state across components, use HarmonyOS' reactive decorators:

// Parent component
@State currentSubTab: number = 0;
Enter fullscreen mode Exit fullscreen mode

// Child component
@link currentSubTab: number;
​​Q: Animation stutters during layout transitions?​​
​​A:​​ Optimize with these approaches:
Use transition API for property animations
Debounce resize events with onAreaChange
Avoid heavy operations in breakpoint change callbacks
​​🎉 5. Key Takeaways​​

HarmonyOS provides robust out-of-box solutions for responsive UIs. This navigation pattern demonstrates how its ​​adaptive layout capabilities​​ enable professional cross-device experiences through:

Logical breakpoint segmentation
Component-based architecture
Automated responsive transitions

Top comments (0)