How do I create a floating tab bar view?

Asked on 06/11/2025

1 search

To create a floating tab bar view in your app, you can use the new design features introduced in SwiftUI and UIKit. Here's how you can achieve this:

SwiftUI

  1. Floating Tab Bar: In SwiftUI, the tab bar can float above the content and be configured to minimize and scroll. To adopt this behavior, use the Tab Bar Minimize Behavior modifier. For example, you can set the behavior to onscroll down, which will re-expand the tab bar when scrolling in the opposite direction.

  2. Tab View Bottom Accessory: If you have additional controls that you want to keep close at hand, you can place a view above the tab bar using the Tab View Bottom Accessory modifier. This allows you to take advantage of the extra space provided by the tab bar's collapsing behavior.

  3. Sidebar Adaptable Style: If your app is currently using a tab bar, you can try out the sidebar appearance by setting a tab view style of sidebar adaptable. This will make your tab bar appear as a sidebar, which is useful for apps with a lot of content.

UIKit

  1. Floating Tab Bar: In UIKit, the tab bar can also float above the content. To allow the top bar to minimize on scroll, set the top bar minimize behavior to the desired direction, such as onscroll down.

  2. Bottom Accessory: To set a bottom accessory, create a UITabAccessory with your content view and set the bottom accessory property on UITabBarController. This will display the accessory view above the tab bar, matching its appearance.

For more detailed guidance, you can refer to the sessions from WWDC:

These sessions provide insights into how to implement and customize the floating tab bar in both SwiftUI and UIKit.