Introduction

If you want a UISegmentedControl to appear below the navigation bar, treat it as part of the view layout under the bar rather than as a navigation item inside the bar. In iOS 7-style layouts, the important issue is top-edge layout behavior: your content can extend underneath the navigation bar unless you place and constrain the segmented control deliberately.

Put the Segmented Control in the View Hierarchy

A straightforward approach is to add the segmented control near the top of the controller's main view and position it below the navigation bar area:

1import UIKit
2
3final class SegmentsViewController: UIViewController {
4    private let segmented = UISegmentedControl(items: ["First", "Second"])
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8        view.backgroundColor = .systemBackground
9
10        segmented.translatesAutoresizingMaskIntoConstraints = false
11        view.addSubview(segmented)
12
13        NSLayoutConstraint.activate([
14            segmented.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 8),
15            segmented.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
16            segmented.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16)
17        ])
18    }
19}

The key is anchoring to the top safe area or equivalent top layout region so the control sits below the bar instead of underneath it.

Do Not Confuse “Below the Bar” with “Inside the Bar”

A segmented control can also be placed in navigationItem.titleView, but that puts it inside the navigation bar, not below it. If the requirement is truly “below the navigation bar,” it belongs in the main content layout.

That distinction matters because many examples online show segmented controls in the title area, which solves a different UI problem.

Respect Top Layout Behavior

In iOS 7-era layout, views could extend under translucent bars. That means the control might appear too high or partially obscured if you do not account for the navigation bar area.

The practical rule is simple:

• put the segmented control in the main view
• pin it below the top layout area
• let the rest of the content flow underneath it

That avoids awkward overlap with the navigation bar.

Keep the Navigation Model Clean

If the segmented control changes the visible content, consider putting the rest of the page inside a container view or child controller region below it. The segmented control then becomes a stable page-level switch rather than a navigation-bar decoration.

That usually makes the code easier to reason about than repeatedly rebuilding the whole top area of the screen.

Auto Layout Makes the Intent Clearer

Using explicit constraints for the segmented control and the content beneath it is usually better than relying on frame math. The layout becomes easier to maintain when the relationship to the top area is visible in constraints.

Common Pitfalls

• Putting the segmented control in the navigation bar when the requirement is to place it below the bar.
• Anchoring the control to the top of the raw view and letting it slide underneath the navigation bar.
• Ignoring translucent bar layout behavior and then trying to fix overlap with magic numbers.
• Treating the segmented control as a one-off visual tweak instead of a structural part of the screen layout.
• Forgetting that the rest of the content also needs to start below the segmented control.

Summary

• To place a UISegmentedControl below a navigation bar, add it to the main view, not the navigation item.
• Anchor it below the top layout or safe-area boundary.
• Do not confuse “inside the navigation bar” with “below the navigation bar.”
• Account for translucent bar layout behavior on older iOS-style layouts.
• Treat the segmented control as part of the screen's content structure.