[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'),