Skip to content

Commit

Permalink
[added] Docs example of passing component to navbar brand.
Browse files Browse the repository at this point in the history
  • Loading branch information
apkiernan committed Apr 24, 2015
1 parent e75fea5 commit 5f565b9
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 1 deletion.
17 changes: 17 additions & 0 deletions docs/examples/NavbarBrand.js
Original file line number Diff line number Diff line change
@@ -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);
6 changes: 5 additions & 1 deletion docs/src/ComponentsPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions docs/src/Samples.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down

0 comments on commit 5f565b9

Please sign in to comment.