diff --git a/docs/examples/NavbarBrand.js b/docs/examples/NavbarBrand.js new file mode 100644 index 0000000000..e210c5270f --- /dev/null +++ b/docs/examples/NavbarBrand.js @@ -0,0 +1,17 @@ +const navbarInstance = ( + React-Bootstrap}> + + +); + +React.render(navbarInstance, mountNode); diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index 7dab241d02..50be067373 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -335,13 +335,17 @@ const ComponentsPage = React.createClass({

Navbars Navbar, Nav, NavItem

-

You can specify a brand by passing a renderable component or string in brand

Navbars are by default accessible and will provide role='navigation'.

They also supports all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it. For example navbar-fixed-top becomes the property fixedTop. The different properties are fixedTop, fixedBottom, staticTop, inverse, fluid.

You can drag elements to the right by specifying the right property on a nav group.

+

Navbar Basic Example

+

Navbar Brand Example

+

You can specify a brand by passing in a string to brand, or you can pass in a renderable component.

+ +

Mobile Friendly

To have a mobile friendly Navbar, specify the property toggleNavKey on the Navbar with a value corresponding to an eventKey of one of his Nav children. This child will be the one collapsed.

By setting the property {React.DOM.code(null, 'defaultNavExpanded={true}')} the Navbar will start expanded by default.

diff --git a/docs/src/Samples.js b/docs/src/Samples.js index 65c76f89ec..459943615e 100644 --- a/docs/src/Samples.js +++ b/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'),