Here’s what you need to know before getting started with the Navbar:
Use the expand prop to allow for collapsing the Navbar at lower breakpoints.
Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
Use spacing and flex utilities to size and position content
A responsive navigation header, including support for branding, navigation, and more. Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.
Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from variant="light" for use with light background colors, or variant="dark" for dark background colors. Then, customize with the bg prop or any custom css!
While not required, you can wrap the Navbar in a <Container> component to center it on a page, or add one within to only center the contents of a fixed or static top navbar.
<Container>
<Navbarexpand="lg"variant="light"bg="light">
<Navbar.Brandhref="#">Navbar</Navbar.Brand>
</Navbar>
</Container>
Press esc to disable tab trapping
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified expand={'sm' | 'md' | 'lg' | 'xl'} prop. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
You can use Bootstrap's position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements. Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.
Since these positioning needs are so common for Navbars, we've added convenience props for them
Use the expand prop as well as the Navbar.Toggle and Navbar.Collapse components to control when content collapses behind a button.
Set the defaultExpanded prop to make the Navbar start expanded. Set collapseOnSelect to make the Navbar collapse automatically when the user selects an item. You can also finely control the collapsing behavior by using the expanded and onToggle props.
A convenience prop for adding bg-* utility classes since they are so commonly used here.
light and dark are common choices but any bg-* class is supported, including any custom ones you might define.
Pairs nicely with the variant prop.
collapseOnSelect
boolean
false
Toggles expanded to false after the onSelect event of a descendant of a
child <Nav> fires. Does nothing if no <Nav> or <Nav> descendants exist.
Manually controlling expanded via the onSelect callback is recommended instead,
for more complex operations that need to be executed after
the select event of <Nav> descendants.
expand
true | 'sm' | 'md' | 'lg' | 'xl'
true
The breakpoint, below which, the Navbar will collapse.
When true the Navbar will always be expanded regardless of screen size.
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.
onSelect
function
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 <Nav> or <Nav>
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 OnSelect prop,
ensure that you are setting expanded to false and not toggling between
true and false.
onToggle
function
controls expanded
A callback fired when the <Navbar> body collapses or expands. Fired when
a <Navbar.Toggle> is clicked and called with the new expanded
boolean value.
role
string
'navigation'
The ARIA role for the navbar, will default to 'navigation' for
Navbars whose as is something other than <nav>.
sticky
'top' | 'bottom'
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
variant
'light' | 'dark'
'light'
The general visual variant a the Navbar.
Use in combination with the bg prop, background-color utilities,
or your own background styles.
bsPrefix required
string
'navbar'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
An href, when provided the Brand will render as an <a> element (unless as is provided).
bsPrefix
string
'navbar'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
You can use a custom element type for this component.
children
node
The toggle content. When empty, the default toggle will be rendered.
label
string
'Toggle navigation'
An accessible ARIA label for the toggler button.
onClick
function
bsPrefix
string
'navbar-toggler'
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
