Merge pull request react-bootstrap#566 from apkiernan/navbarBrandDocs

[added] Docs example of passing component to navbar brand.

docs/examples/NavbarBrand.js

@@ -0,0 +1,17 @@
+const navbarInstance = (
+  <Navbar brand={<a href="#">React-Bootstrap</a>}>
+    <Nav>
+      <NavItem eventKey={1} href='#'>Link</NavItem>
+      <NavItem eventKey={2} href='#'>Link</NavItem>
+      <DropdownButton eventKey={3} title='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>
+      </DropdownButton>
+    </Nav>
+  </Navbar>
+);
+
+React.render(navbarInstance, mountNode);

docs/src/ComponentsPage.js

@@ -335,13 +335,17 @@ const ComponentsPage = React.createClass({
                 <div className='bs-docs-section'>
                   <h1 id='navbars' className='page-header'>Navbars <small>Navbar, Nav, NavItem</small></h1>
                   <h2 id='navbars-examples'>Example navbars</h2>
-                  <p>You can specify a brand by passing a renderable component or string in <code>brand</code></p>
                   <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 drag elements to the right by specifying the <code>right</code> property on a nav group.</p>
 
+                  <h3>Navbar Basic Example</h3>
                   <ReactPlayground codeText={Samples.NavbarBasic} />
 
+                  <h3>Navbar Brand Example</h3>
+                  <p>You can specify a brand by passing in a string to <code>brand</code>, or you can pass in a renderable component.</p>
+                  <ReactPlayground codeText={Samples.NavbarBrand} />
+
                   <h3>Mobile Friendly</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={true}')} the Navbar will start expanded by default.</p>

docs/src/Samples.js

@@ -51,6 +51,7 @@ export default {
   NavStacked:                    require('fs').readFileSync(__dirname + '/../examples/NavStacked.js', 'utf8'),
   NavJustified:                  require('fs').readFileSync(__dirname + '/../examples/NavJustified.js', 'utf8'),
   NavbarBasic:                   require('fs').readFileSync(__dirname + '/../examples/NavbarBasic.js', 'utf8'),
+  NavbarBrand:                   require('fs').readFileSync(__dirname + '/../examples/NavbarBrand.js', 'utf8'),
   NavbarCollapsable:             require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsable.js', 'utf8'),
   CollapsableNav:                require('fs').readFileSync(__dirname + '/../examples/CollapsableNav.js', 'utf8'),
   TabbedAreaUncontrolled:        require('fs').readFileSync(__dirname + '/../examples/TabbedAreaUncontrolled.js', 'utf8'),