From 5dbafd341281ebce731eceeeccea2cae57884bae Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Sat, 14 Nov 2015 12:33:12 -0500
Subject: [PATCH] [changed] Split the Navbar component into sub-components

---
 docs/examples/.eslintrc            |   5 +-
 docs/examples/CollapsibleNav.js    |  24 ----
 docs/examples/NavbarBasic.js       |   6 +-
 docs/examples/NavbarCollapsible.js |  37 +++--
 docs/examples/NavbarForm.js        |  21 +++
 docs/examples/NavbarTextLink.js    |  20 +++
 docs/src/ComponentsPage.js         |  83 +++++++----
 docs/src/NavMain.js                |  19 ++-
 docs/src/PropTable.js              |   2 +-
 docs/src/ReactPlayground.js        |   2 +-
 docs/src/Samples.js                |   3 +-
 src/Nav.js                         |  44 +++---
 src/NavBrand.js                    |  40 ++----
 src/Navbar.js                      | 219 ++++++++++++-----------------
 src/NavbarBrand.js                 |  32 +++++
 src/NavbarCollapse.js              |  29 ++++
 src/NavbarHeader.js                |  24 ++++
 src/NavbarToggle.js                |  42 ++++++
 src/index.js                       |   1 +
 test/CollapsibleNavSpec.js         |  94 -------------
 test/NavBrandSpec.js               |  12 +-
 test/NavbarSpec.js                 | 170 ++++++++++++----------
 22 files changed, 487 insertions(+), 442 deletions(-)
 delete mode 100644 docs/examples/CollapsibleNav.js
 create mode 100644 docs/examples/NavbarForm.js
 create mode 100644 docs/examples/NavbarTextLink.js
 create mode 100644 src/NavbarBrand.js
 create mode 100644 src/NavbarCollapse.js
 create mode 100644 src/NavbarHeader.js
 create mode 100644 src/NavbarToggle.js
 delete mode 100644 test/CollapsibleNavSpec.js

diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
index 33da9224f3..f6e91e7bc0 100644
--- a/docs/examples/.eslintrc
+++ b/docs/examples/.eslintrc
@@ -34,7 +34,10 @@
     "ListGroup",
     "ListGroupItem",
     "Nav",
-    "NavBrand",
+    "NavbarBrand",
+    "NavbarHeader",
+    "NavbarToggle",
+    "NavbarCollapse",
     "Navbar",
     "NavDropdown",
     "NavItem",
diff --git a/docs/examples/CollapsibleNav.js b/docs/examples/CollapsibleNav.js
deleted file mode 100644
index 6cf05235df..0000000000
--- a/docs/examples/CollapsibleNav.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const navbarInstance = (
-  <Navbar toggleNavKey={0}>
-    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
-    <CollapsibleNav eventKey={0}> {/* This is the eventKey referenced */}
-      <Nav navbar>
-        <NavItem eventKey={1} href="#">Link</NavItem>
-        <NavItem eventKey={2} href="#">Link</NavItem>
-        <NavDropdown eventKey={3} title="Dropdown" id="collapsible-nav-dropdown">
-          <MenuItem eventKey="1">Action</MenuItem>
-          <MenuItem eventKey="2">Another action</MenuItem>
-          <MenuItem eventKey="3">Something else here</MenuItem>
-          <MenuItem divider />
-          <MenuItem eventKey="4">Separated link</MenuItem>
-        </NavDropdown>
-      </Nav>
-      <Nav navbar right>
-        <NavItem eventKey={1} href="#">Link Right</NavItem>
-        <NavItem eventKey={2} href="#">Link Right</NavItem>
-      </Nav>
-    </CollapsibleNav>
-  </Navbar>
-);
-
-ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/examples/NavbarBasic.js b/docs/examples/NavbarBasic.js
index 22180aa984..b85f031484 100644
--- a/docs/examples/NavbarBasic.js
+++ b/docs/examples/NavbarBasic.js
@@ -1,6 +1,10 @@
 const navbarInstance = (
   <Navbar>
-    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">React-Bootstrap</a>
+      </Navbar.Brand>
+    </Navbar.Header>
     <Nav>
       <NavItem eventKey={1} href="#">Link</NavItem>
       <NavItem eventKey={2} href="#">Link</NavItem>
diff --git a/docs/examples/NavbarCollapsible.js b/docs/examples/NavbarCollapsible.js
index 164da5eee2..406750bb1c 100644
--- a/docs/examples/NavbarCollapsible.js
+++ b/docs/examples/NavbarCollapsible.js
@@ -1,17 +1,28 @@
 const navbarInstance = (
-  <Navbar inverse toggleNavKey={0}>
-    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
-    <Nav right eventKey={0}> {/* This is the eventKey referenced */}
-      <NavItem eventKey={1} href="#">Link</NavItem>
-      <NavItem eventKey={2} href="#">Link</NavItem>
-      <NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-dropdown">
-        <MenuItem eventKey="1">Action</MenuItem>
-        <MenuItem eventKey="2">Another action</MenuItem>
-        <MenuItem eventKey="3">Something else here</MenuItem>
-        <MenuItem divider />
-        <MenuItem eventKey="4">Separated link</MenuItem>
-      </NavDropdown>
-    </Nav>
+  <Navbar inverse>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">React-Bootstrap</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Nav>
+        <NavItem eventKey={1} href="#">Link</NavItem>
+        <NavItem eventKey={2} href="#">Link</NavItem>
+        <NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-dropdown">
+          <MenuItem eventKey="1">Action</MenuItem>
+          <MenuItem eventKey="2">Another action</MenuItem>
+          <MenuItem eventKey="3">Something else here</MenuItem>
+          <MenuItem divider />
+          <MenuItem eventKey="4">Separated link</MenuItem>
+        </NavDropdown>
+      </Nav>
+      <Nav right>
+        <NavItem eventKey={1} href="#">Link Right</NavItem>
+        <NavItem eventKey={2} href="#">Link Right</NavItem>
+      </Nav>
+    </Navbar.Collapse>
   </Navbar>
 );
 
diff --git a/docs/examples/NavbarForm.js b/docs/examples/NavbarForm.js
new file mode 100644
index 0000000000..9d241f0e25
--- /dev/null
+++ b/docs/examples/NavbarForm.js
@@ -0,0 +1,21 @@
+const navbarInstance = (
+  <Navbar>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">Brand</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Navbar.Form pullLeft>
+        <div className="form-group">
+          <Input type="text" placeholder="Search"/>
+        </div>
+        {' '}
+        <Button type="submit">Submit</Button>
+      </Navbar.Form>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/examples/NavbarTextLink.js b/docs/examples/NavbarTextLink.js
new file mode 100644
index 0000000000..80e99d5622
--- /dev/null
+++ b/docs/examples/NavbarTextLink.js
@@ -0,0 +1,20 @@
+const navbarInstance = (
+  <Navbar>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">Brand</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Navbar.Text>
+        Signed in as: <Navbar.Link href="#">Mark Otto</Navbar.Link>
+      </Navbar.Text>
+      <Navbar.Text pullRight>
+        Have a great day!
+      </Navbar.Text>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index bab62c6ead..99fbdaaba6 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -501,51 +501,72 @@ const ComponentsPage = React.createClass({
 
                 {/* Navbar */}
                 <div className="bs-docs-section">
-                  <h1 className="page-header"><Anchor id="navbars">Navbars</Anchor> <small>Navbar, NavBrand, Nav, NavItem</small></h1>
+                  <h1 className="page-header">
+                    <Anchor id="navbars">Navbars</Anchor>{' '}
+                    <small>Navbar, NavbarBrand, NavbarHeader, NavbarToggle, NavbarCollapse</small>
+                  </h1>
 
-                  <p>Navbars are by default accessible and will provide <code>role="navigation"</code>.</p>
-                  <p>They also supports all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it. For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>. The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>, <code>inverse</code>, <code>fluid</code>.</p>
-                  <p>You can specify a brand node by wrapping it in a <code>NavBrand</code> element and passing it as a child to the <code>Navbar</code>.</p>
-                  <p>You can drag elements to the right by specifying the <code>right</code> property on the <code>Nav</code> component.</p>
+                  <p>
+                    They also supports all the different Bootstrap classes as properties. Just camelCase
+                    the css class and remove navbar from it.
+
+                    For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>.
+                    The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>
+                    , <code>inverse</code>, <code>fluid</code>.
+                  </p>
+                  <p>
+                    You can also align elements to the right by specifying the <code>right</code> prop on
+                    the <code>Nav</code> component.
+                  </p>
 
                   <h3><Anchor id="navbars-basic">Navbar Basic Example</Anchor></h3>
                   <ReactPlayground codeText={Samples.NavbarBasic} />
-
-                  <h3><Anchor id="navbars-mobile-friendly">Mobile Friendly</Anchor></h3>
-                  <p>To have a mobile friendly Navbar, specify the property <code>toggleNavKey</code> on the Navbar with a value corresponding to an <code>eventKey</code> of one of his <code>Nav</code> children. This child will be the one collapsed.</p>
-                  <p>By setting the property {React.DOM.code(null, 'defaultNavExpanded')} the Navbar will start expanded by default.</p>
                   <div className="bs-callout bs-callout-info">
-                    <h4>Scrollbar overflow</h4>
-                    <p>The height of the collapsible is slightly smaller than the real height. To hide the scroll bar, add the following css to your style files.</p>
-                    <pre>
-                      {React.DOM.code(null,
-                        '.navbar-collapse {\n' +
-                        '  overflow: hidden;\n' +
-                        '}\n'
-                      )}
-                    </pre>
+                    <h4>Additional Import Options</h4>
+                    <p>
+                      The Navbar Header, Toggle, Brand, and Collapse components are available as static properties
+                      the <code>{"<Navbar/>"}</code> component, but you can also,
+                      import them directly from the <code>/lib</code> directory
+                      like: <code>{'require("react-bootstrap/lib/NavbarHeader")'}</code>.
+                    </p>
                   </div>
+
+                  <h3><Anchor id="navbars-mobile-friendly">Responsive Navbars</Anchor></h3>
+                  <p>
+                    To have a mobile friendly Navbar, Add a <code>Navbar.Toggle</code> to your Header and wrap your
+                    Navs in a <code>Navbar.Collapse</code> component. The <code>Navbar</code> will automatically wire
+                    the toggle and collapse together!
+                  </p>
+                  <p>
+                    By setting the prop <code>defaultNavExpanded</code> the Navbar will start
+                    expanded by default. You can also finely control the collapsing behavior by using
+                    the <code>navExpanded</code> and <code>onToggle</code> props.
+                  </p>
+
                   <ReactPlayground codeText={Samples.NavbarCollapsible} />
 
-                  <h3><Anchor id="navbars-mobile-friendly-multiple">Mobile Friendly (Multiple Nav Components)</Anchor></h3>
-                  <p>To have a mobile friendly Navbar that handles multiple <code>Nav</code> components use <code>CollapsibleNav</code>. The <code>toggleNavKey</code> must still be set, however, the corresponding <code>eventKey</code> must now be on the <code>CollapsibleNav</code> component.</p>
-                  <div className="bs-callout bs-callout-info">
-                    <h4>Div collapse</h4>
-                    <p>The <code>navbar-collapse</code> div gets created as the collapsible element which follows the <a href="http://getbootstrap.com/components/#navbar-default">bootstrap</a> collapsible navbar documentation.</p>
-                    <pre>&lt;div class="collapse navbar-collapse"&gt;&lt;/div&gt;</pre>
-                  </div>
-                  <ReactPlayground codeText={Samples.CollapsibleNav} />
+                  <h3><Anchor id="navbars-form">Forms</Anchor></h3>
+                  <p>
+                    Use the <code>Navbar.Form</code> convenience component to apply proper margins and alignment to
+                    form components.
+                  </p>
+                  <ReactPlayground codeText={Samples.NavbarForm} />
+
+                  <h3><Anchor id="navbars-text-link">Text and Non-nav links</Anchor></h3>
+                  <p>
+                    Loose text and links can be wraped in the convenience
+                    components: <code>Navbar.Link</code> and <code>Navbar.Text</code>
+                  </p>
+
+                  <ReactPlayground codeText={Samples.NavbarTextLink} />
 
                   <h3><Anchor id="navbar-props">Props</Anchor></h3>
 
                   <h4><Anchor id="navs-props-navbar">Navbar</Anchor></h4>
                   <PropTable component="Navbar"/>
 
-                  <h4><Anchor id="navs-props-navbrand">NavBrand</Anchor></h4>
-                  <PropTable component="NavBrand"/>
-
-                  <h4><Anchor id="navs-props-collapsiblenav">CollapsibleNav</Anchor></h4>
-                  <PropTable component="CollapsibleNav"/>
+                  <h4><Anchor id="navs-props-navbrand">NavbarToggle, Navbar.Toggle</Anchor></h4>
+                  <PropTable component="NavbarToggle"/>
                 </div>
 
                 {/* Breadcrumb */}
diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js
index e1042d54e0..76495a4e31 100644
--- a/docs/src/NavMain.js
+++ b/docs/src/NavMain.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
 import Navbar from '../../src/Navbar';
-import NavBrand from '../../src/NavBrand';
 import Nav from '../../src/Nav';
 
 const NAV_LINKS = {
@@ -37,11 +36,19 @@ const NavMain = React.createClass({
     ]);
 
     return (
-      <Navbar componentClass="header" staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
-        <NavBrand>{brand}</NavBrand>
-        <Nav className="bs-navbar-collapse" role="navigation" eventKey={0} id="top">
-          {links}
-        </Nav>
+      <Navbar staticTop
+        componentClass="header"
+        className="bs-docs-nav"
+        role="banner"
+      >
+        <Navbar.Header>
+          {brand}
+        </Navbar.Header>
+        <Navbar.Collapse className="bs-navbar-collapse" >
+          <Nav role="navigation" id="top">
+            {links}
+          </Nav>
+        </Navbar.Collapse>
       </Navbar>
     );
   },
diff --git a/docs/src/PropTable.js b/docs/src/PropTable.js
index fb82a6bf56..de5f2c19bd 100644
--- a/docs/src/PropTable.js
+++ b/docs/src/PropTable.js
@@ -46,7 +46,7 @@ const PropTable = React.createClass({
     let propsData = this.propsData;
 
     if (!Object.keys(propsData).length) {
-      return <span/>;
+      return <div className="text-muted"><em>There are no public props for this component.</em></div>;
     }
 
     return (
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 057e28ed16..f70f692a03 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -36,7 +36,7 @@ const ListGroupItem = require('../../src/ListGroupItem');
 const MenuItem = require('../../src/MenuItem');
 const Modal = require('../../src/Modal');
 const Nav = require('../../src/Nav');
-const NavBrand = require('../../src/NavBrand');
+const NavbarBrand = require('../../src/NavbarBrand');
 const Navbar = require('../../src/Navbar');
 const NavItem = require('../../src/NavItem');
 const NavDropdown = require('../../src/NavDropdown');
diff --git a/docs/src/Samples.js b/docs/src/Samples.js
index ed2ef287ae..b900fc39d9 100644
--- a/docs/src/Samples.js
+++ b/docs/src/Samples.js
@@ -62,7 +62,8 @@ export default {
   NavJustified:                  require('fs').readFileSync(__dirname + '/../examples/NavJustified.js', 'utf8'),
   NavbarBasic:                   require('fs').readFileSync(__dirname + '/../examples/NavbarBasic.js', 'utf8'),
   NavbarCollapsible:             require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsible.js', 'utf8'),
-  CollapsibleNav:                require('fs').readFileSync(__dirname + '/../examples/CollapsibleNav.js', 'utf8'),
+  NavbarForm:                    require('fs').readFileSync(__dirname + '/../examples/NavbarForm.js', 'utf8'),
+  NavbarTextLink:                require('fs').readFileSync(__dirname + '/../examples/NavbarTextLink.js', 'utf8'),
   TabsUncontrolled:              require('fs').readFileSync(__dirname + '/../examples/TabsUncontrolled.js', 'utf8'),
   TabsControlled:                require('fs').readFileSync(__dirname + '/../examples/TabsControlled.js', 'utf8'),
   TabsNoAnimation:               require('fs').readFileSync(__dirname + '/../examples/TabsNoAnimation.js', 'utf8'),
diff --git a/src/Nav.js b/src/Nav.js
index 7056e6a98d..2087ceebe5 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,9 +1,9 @@
 import React, { cloneElement } from 'react';
 import classNames from 'classnames';
-import Collapse from './Collapse';
 import all from 'react-prop-types/lib/all';
 import deprecated from 'react-prop-types/lib/deprecated';
-import tbsUtils, { bsStyles, bsClass } from './utils/bootstrapUtils';
+import tbsUtils, { bsStyles, bsClass as _bsClass } from './utils/bootstrapUtils';
+
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 
@@ -11,20 +11,23 @@ class Nav extends React.Component {
 
   render() {
     const { className, ulClassName, id, ulId } = this.props;
+    const isNavbar = this.props.navbar != null ? this.props.navbar : this.context.$bs_navbar;
     const classes = tbsUtils.getClassSet(this.props);
 
     classes[tbsUtils.prefix(this.props, 'stacked')] = this.props.stacked;
     classes[tbsUtils.prefix(this.props, 'justified')] = this.props.justified;
 
+
     if (this.props.navbar) {
-      // TODO: need to pass navbar bsClass down...
-      classes['navbar-nav'] = this.props.navbar;
-      classes['navbar-right'] = this.props.right; // this is confusing along with `pullRight`
+      let bsClass = this.context.$bs_navbar_bsClass || 'navbar';
+
+      classes[tbsUtils.prefix({ bsClass }, 'nav')] = true;
+      classes[tbsUtils.prefix({ bsClass }, 'right')] = isNavbar;
     } else {
       classes['pull-right'] = this.props.pullRight;
     }
 
-    let list = (
+    return (
       <ul ref="ul"
         {...this.props}
         id={ulId || id}
@@ -34,21 +37,6 @@ class Nav extends React.Component {
         {ValidComponentChildren.map(this.props.children, this.renderNavItem, this)}
       </ul>
     );
-
-    if (this.props.collapsible) {
-      list = (
-        <Collapse
-          in={this.props.expanded}
-          className={this.props.navbar ? 'navbar-collapse' : void 0}
-        >
-          <div>
-            { list }
-          </div>
-        </Collapse>
-      );
-    }
-
-    return list;
   }
 
   getChildActiveProp(child) {
@@ -98,7 +86,7 @@ Nav.propTypes = {
     )
   ),
   onSelect: React.PropTypes.func,
-  collapsible: React.PropTypes.bool,
+
   /**
    * CSS classes for the wrapper `nav` element
    */
@@ -122,27 +110,31 @@ Nav.propTypes = {
    *
    * @deprecated
    */
+
   ulId: deprecated(React.PropTypes.string,
     'The wrapping `<nav>` has been removed you can use `id` now'),
 
   expanded: React.PropTypes.bool,
+
   navbar: React.PropTypes.bool,
   eventKey: React.PropTypes.any,
   pullRight: React.PropTypes.bool,
   right: React.PropTypes.bool
 };
 
+Nav.contextTypes = {
+  $bs_navbar: React.PropTypes.bool,
+  $bs_navbar_bsClass: React.PropTypes.string
+};
+
 Nav.defaultProps = {
-  collapsible: false,
-  expanded: true,
   justified: false,
-  navbar: false,
   pullRight: false,
   right: false,
   stacked: false
 };
 
-export default bsClass('nav',
+export default _bsClass('nav',
   bsStyles(['tabs', 'pills'],
     Nav
   )
diff --git a/src/NavBrand.js b/src/NavBrand.js
index 397f193c6d..948e5f5ee9 100644
--- a/src/NavBrand.js
+++ b/src/NavBrand.js
@@ -1,32 +1,8 @@
-import classNames from 'classnames';
-import React from 'react';
-
-class NavBrand extends React.Component {
-  render() {
-    const {className, children, ...props} = this.props;
-
-    if (React.isValidElement(children)) {
-      return React.cloneElement(children, {
-        className: classNames(
-          children.props.className, className, 'navbar-brand'
-        )
-      });
-    }
-
-    return (
-      <span {...props} className={classNames(className, 'navbar-brand')}>
-        {children}
-      </span>
-    );
-  }
-}
-
-NavBrand.propTypes = {
-  bsRole: React.PropTypes.string
-};
-
-NavBrand.defaultProps = {
-  bsRole: 'brand'
-};
-
-export default NavBrand;
+import NavbarBrand from './NavbarBrand';
+import deprecationWarning from './utils/deprecationWarning';
+
+export default deprecationWarning.wrapper(NavbarBrand, {
+  message:
+    'The `NavBrand` component has been renamed to: `NavbarBrand`. ' +
+    'Please use that component instead; this alias will be removed in an upcoming release'
+});
diff --git a/src/Navbar.js b/src/Navbar.js
index 27d3a1d9a9..731cf68a8b 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -1,38 +1,67 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
+import uncontrollable from 'uncontrollable';
 import classNames from 'classnames';
-import deprecated from 'react-prop-types/lib/deprecated';
 import elementType from 'react-prop-types/lib/elementType';
 
 import Grid from './Grid';
-import NavBrand from './NavBrand';
+import NavbarBrand from './NavbarBrand';
+import NavbarHeader from './NavbarHeader';
+import NavbarToggle from './NavbarToggle';
+import NavbarCollapse from './NavbarCollapse';
 
-import tbsUtils, { bsClass, bsStyles } from './utils/bootstrapUtils';
+import tbsUtils, { bsClass as bsClasses, bsStyles } from './utils/bootstrapUtils';
 import { DEFAULT, INVERSE } from './styleMaps';
-import createChainedFunction from './utils/createChainedFunction';
-import ValidComponentChildren from './utils/ValidComponentChildren';
 
-const Navbar = React.createClass({
+let Navbar = React.createClass({
 
   propTypes: {
+    /**
+     * Create a fixed navbar along the top of the screen, that scrolls with the page
+     */
     fixedTop: React.PropTypes.bool,
+    /**
+     * Create a fixed navbar along the bottom of the screen, that scrolls with the page
+     */
     fixedBottom: React.PropTypes.bool,
+    /**
+     * Create a full-width navbar that scrolls away with the page
+     */
     staticTop: React.PropTypes.bool,
+    /**
+     * An alternative dark visual style for the Navbar
+     */
     inverse: React.PropTypes.bool,
+    /**
+     * Allow the Navbar to fluidly adjust to the page or container width, instead of at the
+     * predefined screen breakpoints
+     */
     fluid: React.PropTypes.bool,
-    role: React.PropTypes.string,
+
     /**
-     * You can use a custom element for this component
+     * Set a custom element for this component.
      */
     componentClass: elementType,
-    brand: deprecated(React.PropTypes.node, 'Use the `NavBrand` component.'),
-    toggleButton: React.PropTypes.node,
-    toggleNavKey: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number
-    ]),
+    /**
+     * A callback fired when the `<Navbar>` body collapses or expands.
+     * Fired when a `<Navbar.Toggle>` is clicked and called with the new `navExpanded` boolean value.
+     *
+     * @controllable navExpanded
+     */
     onToggle: React.PropTypes.func,
-    navExpanded: React.PropTypes.bool,
-    defaultNavExpanded: React.PropTypes.bool
+
+    /**
+     * Explicitly set the visiblity of the navbar body
+     *
+     * @controllable onToggle
+     */
+    navExpanded: React.PropTypes.bool
+  },
+
+  childContextTypes: {
+    $bs_navbar: PropTypes.bool,
+    $bs_navbar_bsClass: PropTypes.string,
+    $bs_navbar_onToggle: PropTypes.func,
+    $bs_navbar_navExpanded: PropTypes.bool,
   },
 
   getDefaultProps() {
@@ -43,49 +72,29 @@ const Navbar = React.createClass({
       fixedBottom: false,
       staticTop: false,
       inverse: false,
-      fluid: false,
-      defaultNavExpanded: false
+      fluid: false
     };
   },
 
-  getInitialState() {
+  getChildContext() {
     return {
-      navExpanded: this.props.defaultNavExpanded
+      $bs_navbar: true,
+      $bs_navbar_bsClass: this.props.bsClass,
+      $bs_navbar_onToggle: this.handleToggle,
+      $bs_navbar_navExpanded: this.props.navExpanded
     };
   },
 
-  shouldComponentUpdate() {
-    // Defer any updates to this component during the `onSelect` handler.
-    return !this._isChanging;
-  },
-
   handleToggle() {
-    if (this.props.onToggle) {
-      this._isChanging = true;
-      this.props.onToggle();
-      this._isChanging = false;
-    }
-
-    this.setState({
-      navExpanded: !this.state.navExpanded
-    });
+    this.props.onToggle(!this.props.navExpanded);
   },
 
   isNavExpanded() {
-    return this.props.navExpanded != null ? this.props.navExpanded : this.state.navExpanded;
-  },
-
-  hasNavBrandChild() {
-    return ValidComponentChildren.findValidComponents(
-      this.props.children, child => child.props.bsRole === 'brand'
-    ).length > 0;
+    return !!this.props.navExpanded;
   },
 
   render() {
     const {
-      brand,
-      toggleButton,
-      toggleNavKey,
       fixedTop,
       fixedBottom,
       staticTop,
@@ -107,103 +116,55 @@ const Navbar = React.createClass({
     classes[tbsUtils.prefix(this.props, INVERSE)] = this.props.inverse;
     classes[tbsUtils.prefix(this.props, DEFAULT)] = !this.props.inverse;
 
-    const showHeader =
-      (brand || toggleButton || toggleNavKey != null) &&
-      !this.hasNavBrandChild();
-
     return (
       <ComponentClass {...props} className={classNames(className, classes)}>
         <Grid fluid={fluid}>
-          {showHeader ? this.renderBrandHeader() : null}
-          {ValidComponentChildren.map(children, this.renderChild)}
+          { children }
         </Grid>
       </ComponentClass>
     );
-  },
-
-  renderBrandHeader() {
-    let {brand} = this.props;
-    if (brand) {
-      brand = <NavBrand>{brand}</NavBrand>;
-    }
-
-    return this.renderHeader(brand);
-  },
-
-
-  renderHeader(brand) {
-    const hasToggle = this.props.toggleButton || this.props.toggleNavKey != null;
-    const headerClass = tbsUtils.prefix(this.props, 'header');
+  }
+});
 
-    return (
-      <div className={headerClass}>
-        {brand}
-        {hasToggle ? this.renderToggleButton() : null}
-      </div>
-    );
-  },
+const NAVBAR_STATES = [DEFAULT, INVERSE];
 
-  renderChild(child, index) {
-    const key = child.key != null ? child.key : index;
+Navbar = bsStyles(NAVBAR_STATES, DEFAULT,
+  bsClasses('navbar',
+    uncontrollable(Navbar, { navExpanded: 'onToggle' })
+  )
+);
 
-    if (child.props.bsRole === 'brand') {
-      return React.cloneElement(this.renderHeader(child), {key});
-    }
+function createSimpleWrapper(tag, suffix, displayName) {
+  let wrapper = (
+    { componentClass: Tag, className, ...props },
+    { $bs_navbar_bsClass: bsClass = 'navbar' }
+  ) =>
+    <Tag {...props}
+      className={classNames(className, tbsUtils.prefix({ bsClass }, suffix), {
+        [tbsUtils.prefix({ bsClass }, 'right')]: props.pullRight,
+        [tbsUtils.prefix({ bsClass }, 'left')]: props.pullLeft
+      })}
+    />;
 
-    const {toggleNavKey} = this.props;
-    const collapsible =
-      toggleNavKey != null && toggleNavKey === child.props.eventKey;
+  wrapper.displayName = displayName;
 
-    return React.cloneElement(child, {
-      navbar: true,
-      collapsible,
-      expanded: collapsible && this.isNavExpanded(),
-      key
-    });
-  },
+  wrapper.propTypes = { componentClass: elementType};
+  wrapper.defaultProps = { componentClass: tag };
 
-  renderToggleButton() {
-    const {toggleButton} = this.props;
-    const toggleClass = tbsUtils.prefix(this.props, 'toggle');
-
-    if (React.isValidElement(toggleButton)) {
-      return React.cloneElement(toggleButton, {
-        className: classNames(toggleButton.props.className, toggleClass),
-        onClick: createChainedFunction(
-          this.handleToggle, toggleButton.props.onClick
-        )
-      });
-    }
-
-    let children;
-    if (toggleButton != null) {
-      children = toggleButton;
-    } else {
-      children = [
-        <span className="sr-only" key={0}>Toggle navigation</span>,
-        <span className="icon-bar" key={1}></span>,
-        <span className="icon-bar" key={2}></span>,
-        <span className="icon-bar" key={3}></span>
-      ];
-    }
+  wrapper.contextTypes = {
+    $bs_navbar_bsClass: PropTypes.string
+  };
 
-    return (
-      <button
-        type="button"
-        onClick={this.handleToggle}
-        className={toggleClass}
-      >
-        {children}
-      </button>
-    );
-  }
+  return wrapper;
+}
 
-});
+Navbar.Brand = NavbarBrand;
+Navbar.Header = NavbarHeader;
+Navbar.Toggle = NavbarToggle;
+Navbar.Collapse = NavbarCollapse;
 
-const NAVBAR_STATES = [DEFAULT, INVERSE];
+Navbar.Form = createSimpleWrapper('div', 'form', 'NavbarForm');
+Navbar.Text = createSimpleWrapper('p', 'text', 'NavbarText');
+Navbar.Link = createSimpleWrapper('a', 'link', 'NavbarLink');
 
-export default bsStyles(NAVBAR_STATES, DEFAULT,
-  bsClass('navbar',
-    Navbar
-  )
-);
+export default Navbar;
diff --git a/src/NavbarBrand.js b/src/NavbarBrand.js
new file mode 100644
index 0000000000..8d0406018a
--- /dev/null
+++ b/src/NavbarBrand.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import tbsUtils from './utils/bootstrapUtils';
+
+class NavbarBrand extends React.Component {
+
+  render() {
+    const {className, children, ...props} = this.props;
+    let { $bs_navbar_bsClass: bsClass = 'navbar' } = this.context;
+    let brandClasses = tbsUtils.prefix({ bsClass }, 'brand');
+
+    if (React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        className: classNames(
+          children.props.className, className, brandClasses
+        )
+      });
+    }
+
+    return (
+      <span {...props} className={classNames(className, brandClasses)}>
+        {children}
+      </span>
+    );
+  }
+}
+
+NavbarBrand.contextTypes = {
+  $bs_navbar_bsClass: React.PropTypes.string
+};
+
+export default NavbarBrand;
diff --git a/src/NavbarCollapse.js b/src/NavbarCollapse.js
new file mode 100644
index 0000000000..bce989462a
--- /dev/null
+++ b/src/NavbarCollapse.js
@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+import tbsUtils from './utils/bootstrapUtils';
+import Collapse from './Collapse';
+
+let NavbarCollapse = React.createClass({
+
+  contextTypes: {
+    $bs_navbar_bsClass: PropTypes.string,
+    $bs_navbar_navExpanded: PropTypes.bool
+  },
+
+  render() {
+    let { children, ...props } = this.props;
+    let {
+      $bs_navbar_bsClass: bsClass = 'navbar',
+      $bs_navbar_navExpanded: expanded,
+    } = this.context;
+
+    return (
+      <Collapse in={expanded} {...props}>
+        <div className={tbsUtils.prefix({ bsClass }, 'collapse')}>
+          { children }
+        </div>
+      </Collapse>
+    );
+  }
+});
+
+export default NavbarCollapse;
diff --git a/src/NavbarHeader.js b/src/NavbarHeader.js
new file mode 100644
index 0000000000..359aa91244
--- /dev/null
+++ b/src/NavbarHeader.js
@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react';
+import tbsUtils from './utils/bootstrapUtils';
+
+let NavbarHeader = React.createClass({
+
+  contextTypes: {
+    $bs_navbar_bsClass: PropTypes.string
+  },
+
+  render() {
+    let { children, ...props } = this.props;
+    let {
+      $bs_navbar_bsClass: bsClass = 'navbar',
+    } = this.context;
+
+    return (
+      <div className={tbsUtils.prefix({ bsClass }, 'header')}>
+        { children }
+      </div>
+    );
+  }
+});
+
+export default NavbarHeader;
diff --git a/src/NavbarToggle.js b/src/NavbarToggle.js
new file mode 100644
index 0000000000..23aeeafd5c
--- /dev/null
+++ b/src/NavbarToggle.js
@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react';
+import tbsUtils from './utils/bootstrapUtils';
+
+let NavbarToggle = React.createClass({
+
+  propTypes: {
+    /**
+     * The toggle content, if left empty it will render the default toggle (seen above).
+     */
+    children: PropTypes.node
+  },
+
+  contextTypes: {
+    $bs_navbar_bsClass: PropTypes.string,
+    $bs_navbar_onToggle: PropTypes.func,
+  },
+
+  render() {
+    let { children, ...props } = this.props;
+    let {
+      $bs_navbar_bsClass: bsClass = 'navbar',
+      $bs_navbar_onToggle: onToggle
+    } = this.context;
+
+    return (
+      <button type="button"
+        onClick={onToggle}
+        className={tbsUtils.prefix({ bsClass }, 'toggle')}
+      >
+        { children || [
+          <span className="sr-only" key={0}>Toggle navigation</span>,
+          <span className="icon-bar" key={1}></span>,
+          <span className="icon-bar" key={2}></span>,
+          <span className="icon-bar" key={3}></span>
+        ]
+        }
+      </button>
+    );
+  }
+});
+
+export default NavbarToggle;
diff --git a/src/index.js b/src/index.js
index 19c15517e3..df598b787c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,6 +33,7 @@ export ModalTitle from './ModalTitle';
 export Nav from './Nav';
 export Navbar from './Navbar';
 export NavBrand from './NavBrand';
+export NavbarBrand from './NavbarBrand';
 export NavDropdown from './NavDropdown';
 export NavItem from './NavItem';
 export Overlay from './Overlay';
diff --git a/test/CollapsibleNavSpec.js b/test/CollapsibleNavSpec.js
deleted file mode 100644
index 1d48b8bb6d..0000000000
--- a/test/CollapsibleNavSpec.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-import ReactTestUtils from 'react/lib/ReactTestUtils';
-import ReactDOM from 'react-dom';
-
-import CollapsibleNav from '../src/CollapsibleNav';
-import Nav from '../src/Nav';
-import Navbar from '../src/Navbar';
-import NavItem from '../src/NavItem';
-
-describe('CollapsibleNav', () => {
-  it('Should create div and add collapse class', () => {
-    let Parent = React.createClass({
-      render() {
-        return (
-          <Navbar toggleNavKey={1}>
-            <CollapsibleNav eventKey={1}>
-              <Nav>
-                <NavItem eventKey={1} ref='item1'>Item 1 content</NavItem>
-                <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
-              </Nav>
-            </CollapsibleNav>
-          </Navbar>
-        );
-      }
-    });
-    let instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-collapse'));
-  });
-
-  it('Should handle multiple Nav elements', () => {
-    let Parent = React.createClass({
-      render() {
-        return (
-          <Navbar toggleNavKey={1}>
-            <CollapsibleNav eventKey={1} ref='collapsible_object'>
-              <Nav>
-                <NavItem eventKey={1} ref='item1'>Item 1 content</NavItem>
-                <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
-              </Nav>
-              <Nav>
-                <NavItem eventKey={1} ref='item1'>Item 1 content</NavItem>
-                <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
-              </Nav>
-            </CollapsibleNav>
-          </Navbar>
-        );
-      }
-    });
-    let instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    assert.ok(ReactTestUtils.findRenderedComponentWithType(instance.refs.collapsible_object.refs.collapsible_0, Nav));
-    assert.ok(ReactTestUtils.findRenderedComponentWithType(instance.refs.collapsible_object.refs.collapsible_1, Nav));
-  });
-
-  it('Should just render children and move along if not in <Navbar>', () => {
-    let Parent = React.createClass({
-      render() {
-        return (
-          <CollapsibleNav eventKey={1}>
-            <Nav>
-              <NavItem eventKey={1} ref='item1'>Item 1 content</NavItem>
-              <NavItem eventKey={2} ref='item2'>Item 2 content</NavItem>
-            </Nav>
-          </CollapsibleNav>
-        );
-      }
-    });
-    let instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    let collapsibleNav = ReactTestUtils.findRenderedComponentWithType(instance, CollapsibleNav);
-    assert.notOk(ReactDOM.findDOMNode(collapsibleNav).className.match(/\navbar-collapse\b/));
-    let nav = ReactTestUtils.findRenderedComponentWithType(collapsibleNav.refs.nocollapse_0, Nav);
-    assert.ok(nav);
-  });
-
-  it('Should retain childrens classes set by className', () => {
-    let Parent = React.createClass({
-      render() {
-        return (
-          <Navbar toggleNavKey={1}>
-            <CollapsibleNav eventKey={1} ref='collapsible_object'>
-              <Nav>
-                <NavItem eventKey={1} ref='item1' className='foo bar'>Item 1 content</NavItem>
-                <NavItem eventKey={2} ref='item2' className='baz'>Item 2 content</NavItem>
-              </Nav>
-            </CollapsibleNav>
-          </Navbar>
-        );
-      }
-    });
-    let instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.collapsible_object.refs.collapsible_0, 'foo'));
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.collapsible_object.refs.collapsible_0, 'bar'));
-    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance.refs.collapsible_object.refs.collapsible_0, 'baz'));
-  });
-});
diff --git a/test/NavBrandSpec.js b/test/NavBrandSpec.js
index d47e562262..2f20099a2a 100644
--- a/test/NavBrandSpec.js
+++ b/test/NavBrandSpec.js
@@ -2,13 +2,13 @@ import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import ReactDOM from 'react-dom';
 
-import NavBrand from '../src/NavBrand';
+import NavbarBrand from '../src/NavbarBrand';
 
-describe('Navbrand', () => {
+describe('NavbarBrand', () => {
 
-  it('Should create navbrand SPAN element', () => {
+  it('Should create NavbarBrand SPAN element', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <NavBrand>Brand</NavBrand>
+      <NavbarBrand>Brand</NavbarBrand>
     );
 
     let brand = ReactDOM.findDOMNode(instance);
@@ -18,9 +18,9 @@ describe('Navbrand', () => {
     assert.equal(brand.innerText, 'Brand');
   });
 
-  it('Should create navbrand A (link) element', () => {
+  it('Should create NavbarBrand A (link) element', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <NavBrand><a href>BrandLink</a></NavBrand>
+      <NavbarBrand><a href>BrandLink</a></NavbarBrand>
     );
 
     let brand = ReactDOM.findDOMNode(instance);
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index 61937a4b6d..1aa7283321 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -3,10 +3,9 @@ import ReactTestUtils from 'react/lib/ReactTestUtils';
 import ReactDOM from 'react-dom';
 
 import Nav from '../src/Nav';
-import NavBrand from '../src/NavBrand';
 import Navbar from '../src/Navbar';
 
-import { getOne, shouldWarn } from './helpers';
+import { getOne } from './helpers';
 
 describe('Navbar', () => {
 
@@ -69,152 +68,171 @@ describe('Navbar', () => {
     assert.equal(ReactDOM.findDOMNode(instance).nodeName, 'HEADER');
   });
 
-  it('Should throw a deprecation warning message when brand is passed', () => {
-    ReactTestUtils.renderIntoDocument(
-      <Navbar brand="Brand" />
-    );
-    shouldWarn('deprecated');
-  });
-
   it('Should add header with brand', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar brand="Brand" />
+      <Navbar>
+        <Navbar.Header>
+          <Navbar.Brand>Brand</Navbar.Brand>
+        </Navbar.Header>
+      </Navbar>
     );
 
     let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
 
-    assert.ok(header);
-
     let brand = getOne(header.getElementsByClassName('navbar-brand'));
 
     assert.ok(brand);
     assert.equal(brand.nodeName, 'SPAN');
     assert.equal(brand.innerText, 'Brand');
-
-    shouldWarn('deprecated');
   });
 
-  it('Should add span element with navbar-brand class using NavBrand Component', () => {
+  it('Should add link element with navbar-brand class using NavBrand Component', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar>
-        <NavBrand>Brand</NavBrand>
+        <Navbar.Header>
+          <Navbar.Brand><a>Brand</a></Navbar.Brand>
+        </Navbar.Header>
       </Navbar>
     );
 
     let brand = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-brand');
 
     assert.ok(brand);
-    assert.equal(brand.nodeName, 'SPAN');
+    assert.equal(brand.nodeName, 'A');
     assert.equal(brand.innerText, 'Brand');
   });
 
-  it('Should add header with brand component', () => {
+  it('Should pass navbar context to navs', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar brand={<a>Brand</a>} />
+      <Navbar>
+        <Nav />
+      </Navbar>
     );
 
-    let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
-
-    assert.ok(header);
-
-    let brand = getOne(header.getElementsByClassName('navbar-brand'));
-
-    assert.ok(brand);
-    assert.equal(brand.nodeName, 'A');
-    assert.equal(brand.innerText, 'Brand');
+    let nav = ReactTestUtils.findRenderedComponentWithType(instance, Nav);
 
-    shouldWarn('deprecated');
+    assert.ok(nav.context.$bs_navbar);
   });
 
-  it('Should add link element with navbar-brand class using NavBrand Component', () => {
+  it('Should add default toggle', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar>
-        <NavBrand><a>Brand</a></NavBrand>
+        <Navbar.Header>
+          <Navbar.Toggle />
+        </Navbar.Header>
       </Navbar>
     );
 
-    let brand = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-brand');
-
-    assert.ok(brand);
-    assert.equal(brand.nodeName, 'A');
-    assert.equal(brand.innerText, 'Brand');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
+    ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'icon-bar');
   });
 
-  it('Should add only one element with navbar-brand class using NavBrand Component', () => {
+  it('Should add custom toggle', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar brand="Brand">
-        <NavBrand>Brand</NavBrand>
+      <Navbar>
+        <Navbar.Header>
+          <Navbar.Toggle>
+            <span className='test'>hi</span>
+          </Navbar.Toggle>
+        </Navbar.Header>
       </Navbar>
     );
 
-    let brands = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'navbar-brand');
-
-    assert.equal(brands.length, 1);
-    assert.equal(brands[0].nodeName, 'SPAN');
-    assert.equal(brands[0].innerText, 'Brand');
-
-    shouldWarn('deprecated');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'test');
   });
 
-  it('Should pass navbar prop to navs', () => {
+  it('Should trigger onToggle', () => {
+    let toggleSpy = sinon.spy();
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar>
-        <Nav />
+      <Navbar onToggle={toggleSpy}>
+        <Navbar.Header>
+          <Navbar.Toggle />
+        </Navbar.Header>
       </Navbar>
     );
 
-    let nav = ReactTestUtils.findRenderedComponentWithType(instance, Nav);
+    let toggle = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
 
-    assert.ok(nav.props.navbar);
+    ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(toggle));
+
+    expect(toggleSpy).to.be.calledOnce;
+    expect(toggleSpy).to.be.calledWith(true);
   });
 
-  it('Should add header when toggleNavKey is 0', () => {
+  it('Should render collapse', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar toggleNavKey={0}>
-        <Nav eventKey={0} />
+      <Navbar>
+        <Navbar.Collapse>
+          hello
+        </Navbar.Collapse>
       </Navbar>
     );
 
-    let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
-
-    assert.ok(header);
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-collapse');
   });
 
-  it('Should add header when toggleNavKey is 1', () => {
+  it('Should pass navExpanded to Collapse', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar toggleNavKey={1}>
-        <Nav eventKey={1} />
+      <Navbar defaultNavExpanded>
+        <Navbar.Collapse>
+          hello
+        </Navbar.Collapse>
       </Navbar>
     );
 
-    let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
+    let collapse = ReactTestUtils.findRenderedComponentWithType(instance, Navbar.Collapse);
 
-    assert.ok(header);
+    expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
   });
 
-  it('Should add header when toggleNavKey is string', () => {
+  it.only('Should wire the toggle to the collapse', () => {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Navbar toggleNavKey={'string'}>
-        <Nav eventKey={'string'} />
+      <Navbar>
+        <Navbar.Header>
+          <Navbar.Toggle />
+        </Navbar.Header>
+        <Navbar.Collapse>
+          hello
+        </Navbar.Collapse>
       </Navbar>
     );
 
-    let header = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-header');
+    let toggle = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-toggle');
+    let collapse = ReactTestUtils.findRenderedComponentWithType(instance, Navbar.Collapse);
+
+    expect(collapse.context.$bs_navbar_navExpanded).to.not.be.ok;
+
+    ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(toggle));
 
-    assert.ok(header);
+    expect(collapse.context.$bs_navbar_navExpanded).to.equal(true);
   });
 
-  it('Should show toggle button when using NavBrand', () => {
-    const instance = ReactTestUtils.renderIntoDocument(
-      <Navbar toggleNavKey={0}>
-        <NavBrand>Brand</NavBrand>
-        <Nav eventKey={0} />
+  it('Should pass `bsClass` down to sub components', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Navbar bsClass='my-navbar'>
+        <Navbar.Header>
+          <Navbar.Brand />
+          <Navbar.Toggle />
+        </Navbar.Header>
+        <Navbar.Collapse>
+          <Navbar.Form/>
+          <Navbar.Text/>
+          <Navbar.Link/>
+          <Nav right/>
+        </Navbar.Collapse>
       </Navbar>
     );
 
-    const toggle = ReactTestUtils.findRenderedDOMComponentWithClass(
-      instance, 'navbar-toggle'
-    );
-    expect(toggle).to.be.ok;
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-header');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-brand');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-toggle');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-text');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-link');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-form');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-collapse');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-nav');
+    ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'my-navbar-right');
   });
 });