-
Navbars Navbar, NavBrand, Nav, NavItem
+
+ Navbars{' '}
+ Navbar, NavbarBrand, NavbarHeader, NavbarToggle, NavbarCollapse
+
-
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 specify a brand node by wrapping it in a NavBrand element and passing it as a child to the Navbar.
-
You can drag elements to the right by specifying the right property on the Nav component.
+
+ 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 also align elements to the right by specifying the right prop on
+ the Nav component.
+
Navbar Basic Example
-
-
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')} the Navbar will start expanded by default.
-
Scrollbar overflow
-
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.
-
- {React.DOM.code(null,
- '.navbar-collapse {\n' +
- ' overflow: hidden;\n' +
- '}\n'
- )}
-
+
Additional Import Options
+
+ The Navbar Header, Toggle, Brand, and Collapse components are available as static properties
+ the {""} component, but you can also,
+ import them directly from the /lib directory
+ like: {'require("react-bootstrap/lib/NavbarHeader")'}.
+
+
+
Responsive Navbars
+
+ To have a mobile friendly Navbar, Add a Navbar.Toggle to your Header and wrap your
+ Navs in a Navbar.Collapse component. The Navbar will automatically wire
+ the toggle and collapse together!
+
+
+ By setting the prop defaultNavExpanded the Navbar will start
+ expanded by default. You can also finely control the collapsing behavior by using
+ the navExpanded and onToggle props.
+
+
-
Mobile Friendly (Multiple Nav Components)
-
To have a mobile friendly Navbar that handles multiple Nav components use CollapsibleNav. The toggleNavKey must still be set, however, the corresponding eventKey must now be on the CollapsibleNav component.
-
-
Div collapse
-
The navbar-collapse div gets created as the collapsible element which follows the bootstrap collapsible navbar documentation.
-
<div class="collapse navbar-collapse"></div>
-
-
+
Forms
+
+ Use the Navbar.Form convenience component to apply proper margins and alignment to
+ form components.
+
+
+
+
Text and Non-nav links
+
+ Loose text and links can be wraped in the convenience
+ components: Navbar.Link and Navbar.Text
+
+
+
Props
Navbar
-
NavBrand
-
-
-
CollapsibleNav
-
+
NavbarToggle, Navbar.Toggle
+