www/docs/components/navbar.mdx
import NavbarBasic from '!!raw-loader!../examples/Navbar/Basic'; import NavbarBrand from '!!raw-loader!../examples/Navbar/Brand'; import NavbarForm from '!!raw-loader!../examples/Navbar/Form'; import NavbarCollapsible from '!!raw-loader!../examples/Navbar/Collapsible'; import NavbarColorSchemes from '!!raw-loader!../examples/Navbar/ColorSchemes'; import NavScroll from '!!raw-loader!../examples/Navbar/NavScroll'; import NavbarOffcanvas from '!!raw-loader!../examples/Navbar/Offcanvas'; import NavbarTextLink from '!!raw-loader!../examples/Navbar/TextLink'; import ContainerOutside from '!!raw-loader!../examples/Navbar/ContainerOutside'; import ContainerInside from '!!raw-loader!../examples/Navbar/ContainerInside';
Here’s what you need to know before getting started with the Navbar:
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.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.
<CodeBlock language="jsx" live> {NavbarBasic} </CodeBlock>A simple flexible branding component. Images are supported but will likely require custom styling to work well.
<CodeBlock language="jsx" live> {NavbarBrand} </CodeBlock>Use <Form inline> and your various form controls within the Navbar.
Align the contents as needed with utility classes.
Loose text and links can be wrapped Navbar.Text in order to
correctly align it vertically.
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!
:::caution Heads up!
Dark variants for components were deprecated in Bootstrap v5.3.0 with the introduction
of color modes. Instead of adding variant="dark", set data-bs-theme="dark" on the
Navbar.
:::
<CodeBlock language="jsx" live> {NavbarColorSchemes} </CodeBlock>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.
When the container is within your navbar, its horizontal padding is removed at
breakpoints lower than your specified expand={'sm' | 'md' | 'lg' | 'xl' | 'xxl'}
prop. This ensures we’re not doubling up on padding unnecessarily on lower
viewports when your navbar is collapsed.
You can use Bootstrap's <DocLink path="/utilities/position/">position utilities</DocLink> 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), or stickied to the bottom (scrolls with the page until it reaches the bottom, 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.
Since these positioning needs are so common for navbars, we've added convenience props for them.
<Navbar fixed="top" />
<Navbar fixed="bottom" />
<Navbar sticky="top" />
<Navbar sticky="bottom" />
You can use the navbarScroll prop in a <Nav> to enable vertical scrolling within the toggleable
contents of a collapsed navbar. See the <DocLink path="/components/navbar/#scrolling">Bootstrap docs</DocLink>
for more information.
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.
:::caution
Watch out! You need to provide a breakpoint value to expand in order for the Navbar to collapse at all.
:::
<CodeBlock language="jsx" live> {NavbarCollapsible} </CodeBlock>Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas component.
We extend both the offcanvas default styles and use the expand prop to create a dynamic and
flexible navigation sidebar.
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints,
set the expand prop to false.