Navigation bar

Open bugs badge

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

Navigation bar

Design & API documentation

Table of contents

Color Theming

Typography Theming


Overview

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

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.

Installation

Installation with CocoaPods

Add the following to your Podfile:

Then, run the following command:

Importing

To import the component:

Swift

Objective-C

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

Objective-C

Stopping observation

Swift

Objective-C

Exceptions

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

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:

Swift

Objective-C

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:

Swift

Objective-C