Navbars

    A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

    Overview

    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.

    Brand

    A simple flexible branding component. Images are supported but will likely require custom styling to work well.

    Forms

    Text and Non-nav links

    Loose text and links can be wrapped Navbar.Text in order to correctly align it vertically.

    Color schemes

    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!

    Containers

    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.

    Placement

    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.

    Fixed top

    <Navbar fixed="top" />

    Fixed bottom

    <Navbar fixed="bottom" />

    Sticky top

    <Navbar sticky="top" />

    Scrolling

    You can use the navbarScroll prop in a <Nav> to enable vertical scrolling within the toggleable contents of a collapsed navbar. See the Bootstrap docs for more information.

    Responsive behaviors

    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.

    Offcanvas

    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.

    API

    Navbar

    import Navbar from 'react-bootstrap/Navbar'
    NameTypeDefaultDescription
    as
    elementType

    Set a custom element for this component.

    bg
    string

    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
    boolean | string
    		true

    The breakpoint, below which, the Navbar will collapse. When true the Navbar will always be expanded regardless of screen size.

    expanded
    boolean
    controlled by: onToggle, initial prop: defaultExpanded

    Controls the visibility of the navbar body

    fixed
    'top' | 'bottom'

    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'

    Position the navbar at the top of the viewport, but only after scrolling past it. A convenience prop for the sticky-top positioning class.

    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
    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.

    Navbar.Brand

    import Navbar from 'react-bootstrap/Navbar'
    NameTypeDefaultDescription
    as
    elementType

    Set a custom element for this component.

    href
    string

    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.

    Navbar.Toggle

    import Navbar from 'react-bootstrap/Navbar'
    NameTypeDefaultDescription
    as
    elementType
    		<button>

    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.

    Navbar.Collapse

    import Navbar from 'react-bootstrap/Navbar'
    NameTypeDefaultDescription
    bsPrefix
    string
    		'navbar-collapse'

    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.