diff --git a/src/components/menu/menu-toggle.ts b/src/components/menu/menu-toggle.ts
index 080b712477..0f8ffcdb12 100644
--- a/src/components/menu/menu-toggle.ts
+++ b/src/components/menu/menu-toggle.ts
@@ -33,24 +33,28 @@ import {MenuController} from './menu-controller';
  * the `<ion-buttons>` element:
  *
  * ```html
- * <ion-navbar *navbar>
- *   <ion-buttons start>
- *     <button>
- *       <ion-icon name="contact"></ion-icon>
+ * <ion-header>
+ *
+ *   <ion-navbar>
+ *     <ion-buttons start>
+ *       <button>
+ *         <ion-icon name="contact"></ion-icon>
+ *       </button>
+ *     </ion-buttons>
+ *     <button menuToggle>
+ *       <ion-icon name="menu"></ion-icon>
  *     </button>
- *   </ion-buttons>
- *   <button menuToggle>
- *     <ion-icon name="menu"></ion-icon>
- *   </button>
- *   <ion-title>
- *     Title
- *   </ion-title>
- *   <ion-buttons end>
- *     <button (click)="doClick()">
- *       <ion-icon name="more"></ion-icon>
- *     </button>
- *   </ion-buttons>
- * </ion-navbar>
+ *     <ion-title>
+ *       Title
+ *     </ion-title>
+ *     <ion-buttons end>
+ *       <button (click)="doClick()">
+ *         <ion-icon name="more"></ion-icon>
+ *       </button>
+ *     </ion-buttons>
+ *   </ion-navbar>
+ *
+ * </ion-header>
  * ```
  *
  * Similar to `<ion-buttons>`, the `menuToggle` can be positioned using
diff --git a/src/components/navbar/navbar.ts b/src/components/navbar/navbar.ts
index d29710a716..cd75665a1c 100644
--- a/src/components/navbar/navbar.ts
+++ b/src/components/navbar/navbar.ts
@@ -62,26 +62,32 @@ class ToolbarBackground {
 /**
  * @name Navbar
  * @description
- * Navbar is a global level toolbar that gets updated every time a page gets
- * loaded. You can pass the navbar an `ion-title`, any number of buttons, a segment, or a searchbar.
+ * Navbar acts as the navigational toolbar, which also comes with a back
+ * button. A navbar can contain a `ion-title`, any number of buttons,
+ * a segment, or a searchbar. Navbars must be placed within an
+ * `<ion-header>` in order for them to be placed above the content.
  *
  * @usage
  * ```html
- * <ion-navbar *navbar>
- *   <button menuToggle>
- *     <ion-icon name="menu"></ion-icon>
- *   </button>
+ * <ion-header>
  *
- *   <ion-title>
- *     Page Title
- *   </ion-title>
- *
- *   <ion-buttons end>
- *     <button (click)="openModal()">
- *       <ion-icon name="options"></ion-icon>
+ *   <ion-navbar>
+ *     <button menuToggle>
+ *       <ion-icon name="menu"></ion-icon>
  *     </button>
- *   </ion-buttons>
- * </ion-navbar>
+ *
+ *     <ion-title>
+ *       Page Title
+ *     </ion-title>
+ *
+ *     <ion-buttons end>
+ *       <button (click)="openModal()">
+ *         <ion-icon name="options"></ion-icon>
+ *       </button>
+ *     </ion-buttons>
+ *   </ion-navbar>
+ *
+ * </ion-header>
  * ```
  *
  * @demo /docs/v2/demos/navbar/
@@ -221,9 +227,6 @@ export class Navbar extends ToolbarBase {
 
 /**
  * @private
- * Used to find and register headers in a view, and this directive's
- * content will be moved up to the common navbar location, and created
- * using the same context as the view's content area.
 */
 @Directive({
   selector: 'template[navbar]'
diff --git a/src/components/toolbar/toolbar-title.ts b/src/components/toolbar/toolbar-title.ts
index 7512f4d770..799099c6ad 100644
--- a/src/components/toolbar/toolbar-title.ts
+++ b/src/components/toolbar/toolbar-title.ts
@@ -14,9 +14,11 @@ import {Toolbar} from './toolbar';
  *
  * ```html
  * <ion-header>
+ *
  *   <ion-navbar>
- *     <ion-title>Tab 1</ion-title>
+ *     <ion-title>Settings</ion-title>
  *   </ion-navbar>
+ *
  * </ion-header>
  * ```
  *
@@ -24,14 +26,16 @@ import {Toolbar} from './toolbar';
  *
  * ```html
  * <ion-header>
- *   <ion-navbar>
- *     <ion-title>Tab 1</ion-title>
- *   </ion-navbar>
- * </ion-header>
  *
- * <ion-toolbar>
- *   <ion-title>Subheader</ion-title>
- * </ion-toolbar>
+ *   <ion-navbar>
+ *     <ion-title>Main Heder</ion-title>
+ *   </ion-navbar>
+ *
+ *   <ion-toolbar>
+ *     <ion-title>Subheader</ion-title>
+ *   </ion-toolbar>
+ *
+ * </ion-header>
  * ```
  *
  * @demo /docs/v2/demos/title/
diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
index 77e8385c22..c667e2865a 100644
--- a/src/components/toolbar/toolbar.ts
+++ b/src/components/toolbar/toolbar.ts
@@ -108,8 +108,9 @@ export class ToolbarBase extends Ion {
  * @description
  * A Toolbar is a generic bar that is positioned above or below content.
  * Unlike a [Navbar](../../nav/Navbar), a toolbar can be used as a subheader.
- * Toolbars are positioned automatically at the `top`, but they can be
- * positioned at the bottom by setting `position="bottom"` on the component.
+ * When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
+ * they stay fixed in their respective location. When placed within
+ * `<ion-content>`, toolbars will scroll with the content.
  *
  *
  * ### Buttons in a Toolbar
@@ -132,48 +133,62 @@ export class ToolbarBase extends Ion {
  *
  * @usage
  * ```html
- * <ion-toolbar>
- *   <ion-buttons start>
- *     <button>
- *       <ion-icon name="contact"></ion-icon>
- *     </button>
- *     <button>
- *       <ion-icon name="search"></ion-icon>
- *     </button>
- *   </ion-buttons>
- *   <ion-title>My Toolbar Title</ion-title>
- * </ion-toolbar>
+ * <ion-header>
  *
- * <ion-toolbar>
- *   <ion-title>I'm a subheader</ion-title>
- * </ion-toolbar>
+ *   <ion-toolbar>
+ *     <ion-buttons start>
+ *       <button>
+ *         <ion-icon name="contact"></ion-icon>
+ *       </button>
+ *       <button>
+ *         <ion-icon name="search"></ion-icon>
+ *       </button>
+ *     </ion-buttons>
+ *     <ion-title>My Toolbar Title</ion-title>
+ *   </ion-toolbar>
  *
- * <ion-content></ion-content>
+ *   <ion-toolbar>
+ *     <ion-title>I'm a subheader</ion-title>
+ *   </ion-toolbar>
  *
- * <ion-toolbar position="bottom">
- *   <ion-title>I'm a subfooter</ion-title>
- *   <ion-buttons right>
- *     <button>
- *       <ion-icon name="menu"></ion-icon>
- *     </button>
- *   </ion-buttons>
- * </ion-toolbar>
+ * <ion-header>
  *
- * <ion-toolbar position="bottom">
- *   <ion-title>I'm a footer</ion-title>
- *   <ion-buttons end>
- *     <button>
- *       <ion-icon name="more"></ion-icon>
- *     </button>
- *     <button>
- *       <ion-icon name="options"></ion-icon>
- *     </button>
- *   </ion-buttons>
- * </ion-toolbar>
+ *
+ * <ion-content>
+ *
+ *   <ion-toolbar>
+ *     <ion-title>Scrolls with the content</ion-title>
+ *   </ion-toolbar>
+ *
+ * </ion-content>
+ *
+ *
+ * <ion-footer>
+ *
+ *   <ion-toolbar>
+ *     <ion-title>I'm a subfooter</ion-title>
+ *     <ion-buttons right>
+ *       <button>
+ *         <ion-icon name="menu"></ion-icon>
+ *       </button>
+ *     </ion-buttons>
+ *   </ion-toolbar>
+ *
+ *   <ion-toolbar>
+ *     <ion-title>I'm a footer</ion-title>
+ *     <ion-buttons end>
+ *       <button>
+ *         <ion-icon name="more"></ion-icon>
+ *       </button>
+ *       <button>
+ *         <ion-icon name="options"></ion-icon>
+ *       </button>
+ *     </ion-buttons>
+ *   </ion-toolbar>
+ *
+ * </ion-footer>
  *  ```
  *
- * @property {any} [position] - set position of the toolbar, `top` or `bottom`.
- * Default `top`.
  * @demo /docs/v2/demos/toolbar/
  * @see {@link ../../navbar/Navbar/ Navbar API Docs}
  */