The general visual variant a the Navbar.
Use in combination with the
or your own background styles.
The breakpoint, below which, the Navbar will collapse.
true the Navbar will always be expanded regardless of screen size.
A convenience prop for adding
bg-* utility classes since they are so commonly used here.
dark are common choices but any
bg-* class is supported, including any custom ones you might define.
Pairs nicely with the
Create a fixed navbar along the top or bottom of the screen, that scrolls with the
page. A convenience prop for the
fixed-* positioning classes.
Position the navbar at the top or bottom of the viewport,
but only after scrolling past it. . A convenience prop for the
sticky-* positioning classes.
Not supported in <= IE11 and other older browsers without a polyfill
Set a custom element for this component.
A callback fired when the
<Navbar> body collapses or expands. Fired when
<Navbar.Toggle> is clicked and called with the new
A callback fired when a descendant of a child
<Nav> is selected. Should
be used to execute complex closing or other miscellaneous actions desired
after selecting a descendant of
<Nav>. Does nothing if no
descendants exist. The callback is called with an eventKey, which is a
prop from the selected
<Nav> descendant, and an event.
function ( eventKey: mixed, event?: SyntheticEvent )
For basic closing behavior after all
<Nav> descendant onSelect events in
mobile viewports, try using collapseOnSelect.
Note: If you are manually closing the navbar using this
ensure that you are setting
expanded to false and not toggling between
true and false.
false after the onSelect event of a descendant of a
<Nav> fires. Does nothing if no
<Nav> descendants exist.
expanded via the onSelect callback is recommended instead,
for more complex operations that need to be executed after
select event of
Controls the visiblity of the navbar body
The ARIA role for the navbar, will default to ‘navigation’ for
as is something other than