# WeChat mini program navigation in SwiftUI: the capsule

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-10. 10 min read.
> Source: https://vp0.com/blogs/wechat-mini-program-navigation-ui-swiftui

The signature is the capsule, a floating pill in the top-right. Build it as an overlay above a flat TabView and a minimal NavigationStack.

**TL;DR.** WeChat mini program navigation has three distinctive parts you recreate in SwiftUI: the floating capsule button in the top-right corner, a clean bottom tab bar of up to five tabs, and within-page push navigation with a minimal bar. The capsule, that pill holding a more-menu dot and a close target, is the signature element most clones get wrong. The fastest way to build the whole pattern is to start from a free VP0 design and let Claude Code or Cursor read its source page, then assemble it from a TabView, a NavigationStack, and a custom capsule overlay.

WeChat mini program navigation has three distinctive parts you recreate in SwiftUI: the floating capsule button in the top-right corner, a clean bottom tab bar of up to five tabs, and within-page push navigation with a minimal custom bar. The capsule, that pill holding a more-menu dot and a close target, is the signature element and the part most clones get wrong. The fastest way to build the whole pattern is to start from a free VP0 design and let Claude Code or Cursor read its source page, then assemble it from a `TabView`, a `NavigationStack`, and a custom capsule overlay.

The look is deceptively simple: flat, spacious, and consistent, which means the details carry it. The sections below cover the capsule, the tab bar, page navigation, and how to keep it feeling native on iOS rather than like a literal port of an Android-first design.

## What makes WeChat mini program navigation distinctive?

Three elements define it. The capsule in the top-right is a persistent control that floats above every screen, holding a more-menu button and a close or home button separated by a thin divider. The bottom tab bar is a flat row of up to five tabs with small icons and labels. And page navigation is a standard push and pop, but with a stripped-back navigation bar that prioritizes content over chrome.

What ties them together is restraint. There are no heavy shadows, no ornate bars, and very little color outside the content itself, which is why a faithful clone lives or dies on spacing, weight, and alignment rather than on flashy components. Getting the capsule's exact proportions and the tab bar's calm density right is most of the work. A broader take on flat iOS tab bars is in [the iOS 18 custom tab bar template](/blogs/ios-18-custom-tab-bar-ui-template/).

## Building the capsule button

The capsule is an overlay, not part of any single screen, so it sits above your navigation in a `ZStack` and stays fixed in the top-right safe area. It is a `Capsule` shape containing two tappable areas with a divider between them.

```swift
HStack(spacing: 0) {
    Button(action: openMore) { Image(systemName: "ellipsis") }
        .frame(width: 44, height: 32)
    Divider().frame(height: 18)
    Button(action: close) { Image(systemName: "circle") }
        .frame(width: 44, height: 32)
}
.background(.ultraThinMaterial, in: Capsule())
.overlay(Capsule().stroke(.quaternary, lineWidth: 0.5))
.padding(.trailing, 12)
.frame(maxWidth: .infinity, alignment: .trailing)
```

The proportions are what sell it: a low-height pill, generous horizontal padding, a hairline divider, and just enough background separation to read over any content. Using `.ultraThinMaterial` gives it the subtle translucency the real capsule has over scrolling content, while keeping the two buttons at a comfortable 44-point touch target even though the pill looks compact. Position it in the top trailing safe area so it clears the status bar and notch on every device.

## The bottom tab bar

The tab bar is a flat `TabView` with up to five tabs, each a small icon over a small label, with the active tab tinted and the rest in a muted gray. SwiftUI's [`TabView`](https://developer.apple.com/documentation/swiftui/tabview) gives you the structure, and you style it to match the calm, low-contrast look rather than a heavy iOS default.

```swift
TabView(selection: $tab) {
    HomeView().tabItem { Label("Home", systemImage: "house") }.tag(0)
    DiscoverView().tabItem { Label("Discover", systemImage: "safari") }.tag(1)
    MeView().tabItem { Label("Me", systemImage: "person") }.tag(2)
}
.tint(.green)
```

Keep to five tabs at most, because the pattern crowds quickly and the mini-program convention caps it there. Apple's [tab bar guidance](https://developer.apple.com/design/human-interface-guidelines/tab-bars) lines up well with this: clear icons, short labels, and a tinted selected state. The detail to match is the muted weight of the inactive tabs, since the real design keeps everything quiet until the user acts. For a structurally different navigation model on larger screens, [the iPad split-view navigation guide](/blogs/ipad-pro-desktop-class-navigation-split-view-swiftui/) shows when a tab bar is not the right container.

## Page navigation within a tab

Inside each tab, pages push and pop with a `NavigationStack`, but the navigation bar is deliberately minimal: a back affordance, a centered title, and little else. The content does the work, and the bar stays out of the way.

```swift
NavigationStack {
    FeedView()
        .navigationTitle("Discover")
        .navigationBarTitleDisplayMode(.inline)
        .toolbarBackground(.thinMaterial, for: .navigationBar)
}
```

The capsule overlay sits above this stack, so it remains visible as pages push, which is exactly how the real mini-program behaves: the host chrome persists while the program's own pages change beneath it. Use an inline title to keep the bar short, and resist adding toolbar buttons that the capsule already covers. Keeping the per-page bar minimal is what preserves the spacious feel as the user navigates deeper. The same persistent-overlay-over-changing-content idea appears in [the KMP native navigation clone](/blogs/kmp-ios-native-navigation-ui-clone/).

## Making it feel native on iOS

WeChat's mini-program design is shaped by Android-first conventions, so a literal port can feel slightly off on iOS, and a few adjustments fix that without losing the recognizable look. Respect iOS safe areas so the capsule and tab bar clear the notch and home indicator, use the iOS back gesture rather than only a back button, and match system font weights so text sits naturally next to native controls.

The judgment call is how literal to be. A pixel-perfect clone of the Android capsule placement can collide with the iOS status bar; nudging it into the safe area keeps it faithful and correct. Honoring the platform's gestures and insets while keeping the distinctive capsule and flat tab bar gives you a design that reads as a mini-program but behaves like an iOS app, which is usually what you actually want.

## Making it fast with AI and a real design

AI builders get the tab bar quickly and the capsule wrong. Claude Code and Cursor will produce a reasonable `TabView`, then place the capsule as a normal toolbar button instead of a floating overlay, or size its proportions like a standard iOS pill so it loses the distinctive low, wide shape. The structure compiles and the signature element looks generic.

A real design and a clear instruction fix it. When the capsule's proportions, the tab styling, and the spacing are already decided, the model assembles the pattern instead of approximating it, and you tell it the capsule is a fixed overlay, not a nav-bar item. Starting from a free VP0 design provides that structure, since each design has a machine-readable source page Claude Code, Cursor, or Rork read from a pasted link, so the capsule and tab bar match a real layout rather than a guess.

## Accessibility in a compact navigation pattern

The capsule and a dense tab bar are exactly the kind of compact controls that fail accessibility if you are not deliberate, so build it in from the start. The capsule's two buttons are visually a dot and a circle, which means nothing to a VoiceOver user, so give each a clear accessibility label like "More options" and "Close mini app" rather than relying on the icon. Apple's [accessibility guidance](https://developer.apple.com/design/human-interface-guidelines/accessibility) treats this as a baseline, and it is easy to forget on icon-only controls.

The tab bar needs the same care. Keep the tab labels visible rather than icon-only where you can, since labels help every user and are essential for screen readers, and make sure the labels still fit when a user turns up Dynamic Type rather than truncating to nonsense. The capsule's 44-point touch targets matter here too: the pill looks small, but the tappable areas must stay large enough to hit reliably, which is why the earlier layout sizes the buttons generously even inside a compact shape. A navigation pattern this minimal has little margin for accessibility mistakes, so testing it with VoiceOver and large text before shipping is worth the few minutes it takes.

## Common mistakes cloning mini program navigation

A few mistakes recur. Treating the capsule as a navigation-bar button is the first, which loses its floating, persistent quality; it belongs in an overlay above the navigation. Using too many tabs is the second, since the pattern caps at five and crowds past that.

Ignoring iOS safe areas is the third, so the capsule collides with the status bar or the tab bar sits under the home indicator. Over-styling the bars is the fourth, adding shadows and color that break the flat, quiet look the design depends on. The fifth is skipping the iOS back gesture in favor of only a back button, which makes navigation feel non-native even when the visuals are right. Matching the restraint, not just the components, is what makes the clone convincing.

## Key takeaways: WeChat mini program navigation in SwiftUI

Build the pattern from three parts: a floating capsule overlay in the top-right safe area, a flat `TabView` of up to five tabs, and minimal per-page `NavigationStack` bars. Get the capsule's low, wide proportions and hairline divider right, keep the tab bar quiet with muted inactive states, and let the persistent capsule float above changing pages. Respect iOS safe areas and gestures so it feels native rather than ported. Let an AI builder assemble it from a real design, and steer it away from treating the capsule as a toolbar button. A commissioned navigation system can cost $5,000 or more, while starting from a free VP0 design gives you the layout for nothing.

You can [browse VP0 designs](/explore) to start your navigation from a real layout rather than a blank screen, and let the AI builder assemble the capsule and tab bar from a reference that already gets the proportions right.

## Frequently asked questions

### How do you build WeChat mini program navigation in SwiftUI?

Assemble three parts: a floating capsule button as an overlay in the top-right safe area, a flat `TabView` of up to five tabs styled with muted inactive states, and `NavigationStack` page navigation with a minimal inline bar. Keep the capsule above the navigation so it persists as pages change. Starting from a free VP0 design gets the proportions and spacing right so you assemble the pattern rather than approximate it.

### What is the capsule button in a WeChat mini program?

It is the pill-shaped control in the top-right corner that holds a more-menu button and a close or home button separated by a thin divider, floating above every screen as the host chrome. In SwiftUI you build it as a `Capsule` with two 44-point touch targets and a hairline divider, placed in an overlay in the top trailing safe area so it stays fixed while pages push beneath it. Its low, wide proportions are the detail that makes it recognizable.

### How many tabs should a mini program tab bar have?

Up to five, which is both the mini-program convention and a sound iOS limit, since a tab bar crowds and becomes hard to tap past that. Use small clear icons with short labels, tint the active tab, and keep the inactive tabs in a muted gray to match the flat, quiet look. If you need more destinations, move the extras into a menu or a profile tab rather than stretching the bar.

### Can VP0 provide a free SwiftUI template for mini program navigation?

Yes. VP0 is a free iOS app design library where every design has a machine-readable source page an AI builder reads from a pasted link, with SwiftUI and React Native variants. You start from a navigation design that already places the capsule and tab bar correctly, hand its source to Claude Code, Cursor, or Rork, and build the screens on top, rather than approximating the signature capsule from a blank view.

### How do I keep a mini program clone feeling native on iOS?

Respect iOS safe areas so the capsule and tab bar clear the notch and home indicator, support the iOS back gesture rather than only a back button, and match system font weights so text sits naturally beside native controls. Nudge the capsule into the safe area rather than copying its Android placement literally. Keeping the distinctive capsule and flat tab bar while honoring the platform's gestures and insets gives you a design that reads as a mini-program but behaves like an iOS app.

## Frequently asked questions

### How do you build WeChat mini program navigation in SwiftUI?

Assemble three parts: a floating capsule button as an overlay in the top-right safe area, a flat TabView of up to five tabs styled with muted inactive states, and NavigationStack page navigation with a minimal inline bar. Keep the capsule above the navigation so it persists as pages change. Starting from a free VP0 design gets the proportions and spacing right so you assemble the pattern rather than approximate it.

### What is the capsule button in a WeChat mini program?

It is the pill-shaped control in the top-right corner that holds a more-menu button and a close or home button separated by a thin divider, floating above every screen as the host chrome. In SwiftUI you build it as a Capsule with two 44-point touch targets and a hairline divider, placed in an overlay in the top trailing safe area so it stays fixed while pages push beneath it. Its low, wide proportions are the detail that makes it recognizable.

### How many tabs should a mini program tab bar have?

Up to five, which is both the mini-program convention and a sound iOS limit, since a tab bar crowds and becomes hard to tap past that. Use small clear icons with short labels, tint the active tab, and keep the inactive tabs in a muted gray to match the flat, quiet look. If you need more destinations, move the extras into a menu or a profile tab rather than stretching the bar.

### Can VP0 provide a free SwiftUI template for mini program navigation?

Yes. VP0 is a free iOS app design library where every design has a machine-readable source page an AI builder reads from a pasted link, with SwiftUI and React Native variants. You start from a navigation design that already places the capsule and tab bar correctly, hand its source to Claude Code, Cursor, or Rork, and build the screens on top, rather than approximating the signature capsule from a blank view.

### How do I keep a mini program clone feeling native on iOS?

Respect iOS safe areas so the capsule and tab bar clear the notch and home indicator, support the iOS back gesture rather than only a back button, and match system font weights so text sits naturally beside native controls. Nudge the capsule into the safe area rather than copying its Android placement literally. Keeping the distinctive capsule and flat tab bar while honoring the platform's gestures and insets gives you a design that reads as a mini-program but behaves like an iOS app.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*