Material Design

Navigation Drawer

Open bugs badge

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.

Navigation drawers are recommended for:

  • Apps with five or more top-level destinations.
  • Apps with two or more levels of navigation hierarchy.
  • Quick navigation between unrelated destinations.
  • </ul>

    Design & API documentation

    Table of contents


    Overview

    Navigation Drawer currently provides the Bottom Drawer presentation style.

    The Navigation Drawer is architected by implementing a custom UIPresentationController and a UIViewControllerTransitioningDelegate named MDCBottomDrawerPresentationController and MDCBottomDrawerTransitionController respectively. This allows us to use the default API Apple provides for UIViewController presentation (more on usage below).

    Through the MDCBottomDrawerViewController class, the Navigation Drawer allows you to pass a contentViewController to act as the content of the drawer, and also a headerViewController which will stick to the top once the drawer is in full screen.

    MDCBottomDrawerViewController also provides a settable trackingScrollView property that should be set to the UITableView or UICollectionView inside your content, if and only if that view fills the entire bounds, and if you are seeking for a more performant solution of having the algorithm only load your view as you scroll and not all at once.

    Lastly, your headerViewController conforms to the MDCBottomDrawerHeader protocol, which implements the method updateDrawerHeaderTransitionRatio:(CGFloat)transitionToTopRatio. This method provides transitionToTopRatio, which moves between 0 to 1 as the transition of the header view transforms from being above the content to becoming sticky on the top. It is 0 when the drawer is above the content and starts changing as the header view expands to cover the status bar and safe area based on the completion rate. It is 1 once the header finishes its transition to become sticky on the top and it’s height is at the size of its preferredContentSize + the safe area.

    MDCBottomDrawerViewController

    MDCBottomDrawerViewController is a UIViewController that allows you to provide your drawer content via the contentViewController and your desired header (optional) through the headerViewController property.

    Installation

    Installation with CocoaPods

    Add the following to your Podfile:

    pod 'MaterialComponents/NavigationDrawer'
    

    Then, run the following command:

    pod install
    

    Importing

    To import the component:

    Swift

    import MaterialComponents.MaterialNavigationDrawer
    

    Objective-C

    #import "MaterialNavigationDrawer.h"
    

    Usage

    Typical use: using the MDCBottomDrawerViewController with/without a header.

    Swift

    let bottomDrawerViewController = MDCBottomDrawerViewController()
    bottomDrawerViewController.contentViewController = UIViewController()
    bottomDrawerViewController.headerViewController = UIViewController() # this is optional
    present(bottomDrawerViewController, animated: true, completion: nil)
    

    Objective-C

    MDCBottomDrawerViewController *bottomDrawerViewController = [[MDCBottomDrawerViewController alloc] init];
    bottomDrawerViewController.contentViewController = [UIViewController new];
    bottomDrawerViewController.headerViewController = [UIViewController new];
    [self presentViewController:bottomDrawerViewController animated:YES completion:nil];
    

    Typical use: presenting in a drawer without a header.

    Swift

    let contentViewController = UIViewController()
    contentViewController.transitioningDelegate = MDCBottomDrawerTransitionController()
    contentViewController.modalPresentationStyle = .custom
    present(contentViewController, animated: true, completion: nil)
    

    Objective-C

    UIViewController *contentViewController = [UIViewController new];
    contentViewController.transitioningDelegate = [MDCBottomDrawerTransitionController new];
    contentViewController.modalPresentationStyle = UIModalPresentationCustom;
    [self presentViewController:contentViewController animated:YES completion:nil];
    

    Typical use: using the MDCBottomDrawerViewController with a need for performant scrolling.

    Swift

    let contentViewController = UITableViewController()
    let bottomDrawerViewController = MDCBottomDrawerViewController()
    bottomDrawerViewController.contentViewController = contentViewController
    bottomDrawerViewController.headerViewController = UIViewController() # this is optional
    bottomDrawerViewController.trackingScrollView = contentViewController.view
    present(bottomDrawerViewController, animated: true, completion: nil)
    

    Objective-C

    UITableViewController *contentViewController = [UITableViewController new];
    MDCBottomDrawerViewController *bottomDrawerViewController = [[MDCBottomDrawerViewController alloc] init];
    bottomDrawerViewController.contentViewController = contentViewController;
    bottomDrawerViewController.headerViewController = [UIViewController new];
    bottomDrawerViewController.trackingScrollView = contentViewController.view;
    [self presentViewController:bottomDrawerViewController animated:YES completion:nil];