NavigationBar

Navigation bar

A navigation bar is a view composed of leading and trailing buttons and either a title label or a custom title view.

Design & API documentation

• Material Design guidelines: App bars: top
• Class: MDCNavigationBar
• Class: MDCNavigationBarTextColorAccessibilityMutator
• Protocol: MDCUINavigationItemObservables
• Enumeration: Enumerations
• Enumeration: MDCNavigationBarTitleAlignment
• Enumeration: MDCNavigationBarTitleViewLayoutBehavior

Related components

• App bars: top
• App bars: bottom

Table of contents

• Overview
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Observing UINavigationItem instances
• Extensions

Color Theming

Typography Theming

---

Overview

Navigation bar is a drop-in replacement for UINavigationBar with a few notable exceptions:

• No navigationItem stack. Instances of MDCNavigationBar must be explicitly provided with a back button. TODO(featherless): Explain how to create a back button with navigation bar once https://github.com/material-components/material-components-ios/issues/340 lands.

The MDCNavigationBar class is a composition of two button bars and a title label or title view. The left and right Button Bars are provided with the navigation item's corresponding bar button items.

Read the button bar section on UIBarButtonItem properties to learn more about supported UIBarButtonItem properties.

Note: The UIBarButtonItem instances set on MDCNavigationBar cannot be used to specify the popover's anchor point on UIPopoverPresentationController. The sourceView and sourceRect on UIPopoverPresentationController should be used instead.

// Set a view controller to be popped over at the center of a target view.
aViewContoller.popoverPresentationController.sourceView = targetView;
aViewContoller.popoverPresentationController.sourceRect = CGRectMake(CGRectGetMidX(targetView.bounds)),CGRectGetMidY(targetView.bounds), 0, 0);

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/NavigationBar'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialNavigationBar

Objective-C

#import "MaterialNavigationBar.h"

Usage

Observing UINavigationItem instances

MDCNavigationBar can observe changes made to a navigation item property much like how a UINavigationBar does. This feature is the recommended way to populate the navigation bar's properties because it allows your view controllers to continue using navigationItem as expected, with a few exceptions outlined below.

If you intend to use UINavigationItem observation it is recommended that you do not directly set the navigation bar properties outlined in MDCUINavigationItemObservables. Instead, treat the observed navigationItem object as the single source of truth for your navigationBar's state.

Starting observation

To begin observing a UINavigationItem instance you must call observeNavigationItem:.

Swift

navigationBar.observe(navigationItem)

Objective-C

[navigationBar observeNavigationItem:self.navigationItem];

Stopping observation

Swift

navigationBar.unobserveNavigationItem()

Objective-C

[navigationBar unobserveNavigationItem];

Exceptions

All of the typical properties including UIViewController's title property will affect the navigation bar as you'd expect, with the following exceptions:

• None of the animated: method varients are supported because they do not implement KVO events. Use of these methods will result in the navigation bar becoming out of sync with the navigationItem properties.
• prompt is not presently supported. https://github.com/material-components/material-components-ios/issues/230.

Extensions

Color Theming

You can theme a navigation bar with your app's color scheme using the ColorThemer extension.

You must first add the Color Themer extension to your project:

pod 'MaterialComponents/NavigationBar+ColorThemer'

Swift

// Step 1: Import the ColorThemer extension
import MaterialComponents.MaterialNavigationBar_ColorThemer

// Step 2: Create or get a color scheme
let colorScheme = MDCSemanticColorScheme()

// Step 3: Apply the color scheme to your component
MDCNavigationBarColorThemer.applySemanticColorScheme(colorScheme, to: component)

Objective-C

// Step 1: Import the ColorThemer extension
#import "MaterialNavigationBar+ColorThemer.h"

// Step 2: Create or get a color scheme
id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];

// Step 3: Apply the color scheme to your component
[MDCNavigationBarColorThemer applySemanticColorScheme:colorScheme
     toNavigationBar:component];

Typography Theming

You can theme a navigation bar with your app's typography scheme using the TypographyThemer extension.

You must first add the Typography Themer extension to your project:

pod 'MaterialComponents/NavigationBar+TypographyThemer'

Swift

// Step 1: Import the TypographyThemer extension
import MaterialComponents.MaterialNavigationBar_TypographyThemer

// Step 2: Create or get a typography scheme
let typographyScheme = MDCTypographyScheme()

// Step 3: Apply the typography scheme to your component
MDCNavigationBarTypographyThemer.applyTypographyScheme(typographyScheme, to: component)

Objective-C

// Step 1: Import the TypographyThemer extension
#import "MaterialNavigationBar+TypographyThemer.h"

// Step 2: Create or get a typography scheme
id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init];

// Step 3: Apply the typography scheme to your component
[MDCNavigationBarTypographyThemer applyTypographyScheme:colorScheme
     toNavigationBar:component];