DEV Community

陈杨
陈杨

Posted on

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

✨ HarmonyOS Development Treasure Pitfall Experience: A Hands-on Guide to Multi-Platform Hierarchical Navigation Bar ✨

Hey folks! Today, while coding, I accidentally discovered a golden case of "multi-platform hierarchical navigation bar" hidden in the official HarmonyOS documentation! This solution perfectly solved my adaptation anxiety when switching between phone/tablet/PC, so I have to share it with you right away!

🚀 1. Why This Solution Is Awesome

Have you ever encountered this scenario: enjoying a smooth sidebar navigation on PC, but everything gets cramped together on mobile? Huawei's solution uses "breakpoints + dynamic component layout" to fix it directly:

  • 📱 Mobile/Foldable: Bottom TabBar + Top Secondary Navigation (one-handed operation is a breeze)
  • 💻 PC/2-in-1 Devices: Elegant left sidebar + top tabs (full business style)
  • Automatically listens to window changes and smoothly switches layout forms!

🔧 3. Step-by-Step Coding Tutorial
▌Mobile Adaptation (sm/md breakpoints)

// Magic code for bottom TabBar
Tabs({ barPosition: BarPosition.End }) {
  TabContent().tabBar('Home')
  TabContent().tabBar('Messages')
  TabContent().tabBar('Mine')
}
.vertical(false) // Horizontal arrangement
.onChange((index) => {
  // Handle Tab switching logic
  this.switchMainContent(index);
})
Enter fullscreen mode Exit fullscreen mode

⚠️ Pitfall Tip: Be sure to use BarPosition.End to keep the TabBar at the bottom!

▌Elegant Sidebar for PC (xl breakpoint)

// Sidebar showcase code
SideBarContainer(SideBarContainerType.Embed) {
  // Left navigation area
  Column() {
    ForEach(this.firstLevelTabs, (item) => {
      NavigationItem({ 
        title: item.name,
        hasSub: item.children.length > 0 
      })
    })
  }
  .width(240)

  // Right content area
  Column() {
    TopTabView() // Secondary navigation
    ContentDisplay() // Main content area
  }
}
.sideBarWidth(240)
Enter fullscreen mode Exit fullscreen mode

🎨 Design Tip: Sidebar width is recommended to be ≥240px, and use 12px icon spacing for the secondary navigation for a more professional look!

💬 4. Frequently Asked Questions in the Dev Group
Q: Why does the layout break when the PC window is resized smaller?
A: Just add "minWindowWidth": 1440 in module.json5 to fix it instantly!

Q: Why does clicking the secondary navigation do nothing?
A: Check if you missed the @link decorator to sync state. Try writing it like this:

@Link @Watch('secondLevelIndex') currentSubTab: number = 0;
Enter fullscreen mode Exit fullscreen mode

🎉 5. Conclusion
This time, I was really amazed by HarmonyOS's layout capabilities! There are actually many more awesome cases hidden in the official docs. Next time, I'll dig into the "cross-device drag-and-drop interaction" black technology. If you want to see it, comment 1 below~

Top comments (0)