Latest 0.1.0
License MIT
Platforms osx 10.10

license CocoaPods CocoaPods

SRTabBarController aims to replicate much of UITabBarController‘s functionality for OS X. It acts as a visual tab bar for NSTabView and has a number of nifty features.

  • Add tabs using segues right within your storyboard.
  • Set text color, tint color, bar color, and item spacing in Interface Builder.
  • Choose from 4 positions: Top, Bottom, Left, Right.
  • Supports text & image, text only or image only tabs.
  • Use translucent effects via NSVisualEffectsView.
  • Written in Swift.

Types of tab bars

Check out this screencast for some of the options available


SRTabBarController can be installed manually by including all files within the Pod directory in your project. However, installation via CocoaPods is recommended.

pod 'SRTabBarController', :git => ''


While SRTabBarController can be added to your project programatically, it is recommended that you use it in your storyboard. Just like UITabBarController tabs can be defined via segues. As custom relationship segues are unsupported as workaround has been used that utilises custom segues and identifiers to define tabs.

1 – Drag a new UIViewController into your storyboard and set it as the root content view controller for your window.
2 – Set the class of the new controller to be SRTabBarController ensuring that the bundle is set correctly.

Xcode Inspector

3 – Define tab bar properties from the Attributes inspector on the SRTabBarController.

Attributes Inspector

4 – Create your view controllers for each tab and link your SRTabBarController to them using a Custom segue.

Attributes Inspector

5 – Ensure each tab view controller has a title defined in the attributes inspector. This is used as the title of the tab.

6 – Okay, this is the trickiest part. Click on each of the segues you just created and define the following in the attributes inspector.

Attributes Inspector

The index here defines the position it will be displayed in the tab bar. Optionally, you can provide the name of a default image within your app’s assets. For example if you had a search tab that you wanted to be at position 1 and have an icon called Search you would set the following as the identifier tab_1_Search.

Customizing SRTabBarController

Alongside the settings that can be defined within Interface Builder’s inspector there are also a number of options that can be set by subclassing SRTabBarController. The SRTabBar itself is actually an NSVisualEffectsView so it’s very easy to get those translucent effects users are familiar with in OS X.

Location – To customize the location on the screen set tabBarLocation to .Top, .Right, .Bottom, or .Left.

Translucency – To enable the visual effects turn set tabBar?.translucent = true.

Visual Effects – Check out the NSVisualEffectsView for some of the settings that can be enabled for the tabBar. You’ll most likely want to change the material and blendingMode.

Check out this screencast for some of the options available

Latest podspec

    "name": "SRTabBarController",
    "version": "0.1.0",
    "summary": "A UITabBarController for OS X",
    "description": "`SRTabBarController` aims to replicate much of `UITabBarController`'s functionality on OS X. A parent tab controller can be added and segues used within interface builder to define the tabs. Options include:nn- Translucency using `NSVisualEffectView`n- Positioned at the top, right, bottom, or left of the windown- Set options such as text color and tint color within Interface buildern- Text & Image, Text Only or Image only tabsnnBehind the scenes `SRTabBarController` uses `NSTabView` to manage the tabs and maintain their state when switching between views.",
    "homepage": "",
    "license": "MIT",
    "authors": {
        "Stephen Radford": "[email protected]"
    "source": {
        "git": "",
        "tag": "0.1.0"
    "social_media_url": "",
    "platforms": {
        "osx": "10.10"
    "source_files": "Pod/**/*"

Pin It on Pinterest

Share This