Navbar

Build responsive navigation headers with brand, nav links, collapse toggles, dropdowns, forms, text, color schemes, containers, and placement utilities.

How it works

Navbars require a wrapping bs-navbar and support captured brand, nav, toggler, and collapse content. Use nav-expand to choose the breakpoint where collapsed content becomes horizontal.

Navbar content is fluid by default, responsive by design, and can include links, dropdowns, forms, text, collapse regions, and offcanvas menus. Collapse animation follows Bootstrap's reduced-motion handling.

  • bs-navbar-brand renders brand text or a brand link.
  • bs-navbar-nav captures links, text items, and dropdown items.
  • bs-navbar-toggler targets the captured bs-navbar-collapse.
  • Color mode, positioning, spacing, and alignment can use Bootstrap classes and data attributes.

Basic navbar

Place brand and nav content directly in bs-navbar. The helper provides the internal fluid container.

aspnet 

<bs-navbar nav-expand="Large" body-bg-color="Tertiary">
    <bs-navbar-brand href="/Docs/GettingStarted">Docs</bs-navbar-brand>
    <bs-navbar-nav>
        <bs-navbar-item href="/Docs/Buttons" is-active="true" aria-current="Page">Buttons</bs-navbar-item>
        <bs-navbar-item href="/Docs/Forms">Forms</bs-navbar-item>
        <bs-navbar-item href="/Docs/Cards">Cards</bs-navbar-item>
        <bs-navbar-item href="#" disabled="true">Disabled</bs-navbar-item>
    </bs-navbar-nav>
</bs-navbar>

Supported content

The examples below dogfood the BCL navbar helpers for the common Bootstrap content types: brand, nav links, dropdowns, text, forms, and collapse.

  • Brand: bs-navbar-brand
  • Nav: bs-navbar-nav, bs-navbar-item, bs-navbar-text-item, bs-navbar-dropdown-item
  • Collapse: bs-navbar-toggler and bs-navbar-collapse
  • Forms and utilities: compose bs-div, bs-input, bs-input-group, and bs-button inside the navbar.

Brand

Brands can render as links when href is present or as text when it is omitted.

aspnet 

<bs-navbar bottom-margin="Default3">
    <bs-navbar-brand href="#">Navbar</bs-navbar-brand>
</bs-navbar>
<bs-navbar body-bg-color="Tertiary">
    <bs-navbar-brand>Navbar</bs-navbar-brand>
</bs-navbar>
<bs-navbar body-bg-color="Tertiary" top-margin="Default3">
    <bs-navbar-brand href="#">
        <bs-img src="/images/Icon-Generator.png" alt="Logo" width="30" height="24" end-margin="Default2" />
        Bootstrap
    </bs-navbar-brand>
</bs-navbar>

Containers

bs-navbar provides the normal navbar structure. For constrained or fluid layouts, use Bootstrap container classes through the navbar helper.

aspnet 

<bs-navbar body-bg-color="Tertiary" bottom-margin="Default3">
    <bs-navbar-brand href="#">Default container</bs-navbar-brand>
</bs-navbar>
<bs-navbar body-bg-color="Tertiary" container-type="Fluid">
    <bs-navbar-brand href="#">Fluid width</bs-navbar-brand>
</bs-navbar>

Nav, dropdowns, and text

Navbar nav captures link items, dropdown items, and text items. Use active and disabled states to match the current navigation state without changing the overall navbar structure.

aspnet 

<bs-navbar nav-expand="Large">
    <bs-navbar-brand href="#">Navbar</bs-navbar-brand>
    <bs-navbar-nav>
        <bs-navbar-item href="#" is-active="true" aria-current="Page">Home</bs-navbar-item>
        <bs-navbar-item href="#">Link</bs-navbar-item>
        <bs-navbar-dropdown-item btn-style="Secondary">
            Dropdown
            <bs-dropdown-menu>
                <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
                <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
                <bs-dropdown-menu-divider />
                <bs-dropdown-menu-item href="#">Something else here</bs-dropdown-menu-item>
            </bs-dropdown-menu>
        </bs-navbar-dropdown-item>
        <bs-navbar-text-item>Signed in as Mark</bs-navbar-text-item>
    </bs-navbar-nav>
</bs-navbar>

Text

Use bs-navbar-text-item for non-link text aligned with the surrounding navbar content.

aspnet 

<bs-navbar>
    <bs-navbar-brand href="#">Navbar text</bs-navbar-brand>
    <bs-navbar-nav>
        <bs-navbar-text-item>Navbar text with an inline element</bs-navbar-text-item>
    </bs-navbar-nav>
</bs-navbar>

Responsive collapse

Use bs-navbar-toggler and bs-navbar-collapse to collapse nav links below the configured nav-expand breakpoint.

aspnet 

<bs-navbar nav-expand="Large" bg-color="Dark" data-bs-theme="dark">
    <bs-navbar-brand href="#">Project</bs-navbar-brand>
    <bs-navbar-toggler aria-label="Toggle navigation" />
    <bs-navbar-collapse id="navbarDocsCollapse">
        <bs-navbar-nav>
            <bs-navbar-item href="#" is-active="true" aria-current="Page">Home</bs-navbar-item>
            <bs-navbar-item href="#">Features</bs-navbar-item>
            <bs-navbar-item href="#">Pricing</bs-navbar-item>
        </bs-navbar-nav>
    </bs-navbar-collapse>
</bs-navbar>

External content

Bootstrap can toggle external collapse content from a navbar. Capture bs-navbar-external-content with a toggler and the navbar wires the collapse target automatically.

Collapsed content
Toggleable through the navbar brand row.
aspnet 

<bs-navbar bg-color="Dark" data-bs-theme="dark">
    <bs-navbar-external-content bg-color="Dark">
        <bs-heading heading-level="Five" body-text-color="Emphasis">Collapsed content</bs-heading>
        <bs-span body-text-color="Secondary">Toggleable through the navbar brand row.</bs-span>
    </bs-navbar-external-content>
    <bs-navbar-toggler aria-label="Toggle external content" />
</bs-navbar>

Forms

Forms can be composed inside navbars with standard BCL form and button helpers. Add search landmarks or labels when a form is used as page navigation search.

aspnet 

<bs-navbar>
    <bs-navbar-brand href="#">Search</bs-navbar-brand>
    <bs-div display="Flex" role="search">
        <bs-input placeholder-text="Search" end-margin="Default2" />
        <bs-button btn-style="Success" outline="true">Search</bs-button>
    </bs-div>
</bs-navbar>
<bs-navbar body-bg-color="Tertiary" top-margin="Default3">
    <bs-input-group>
        <bs-input-group-text>@@</bs-input-group-text>
        <bs-input placeholder-text="Username" aria-label="Username" />
    </bs-input-group>
</bs-navbar>

Scrolling

Add Bootstrap overflow utilities to the captured navbar nav when a collapsed menu should scroll within a constrained height.

aspnet 

<bs-navbar nav-expand="Large">
    <bs-navbar-brand href="#">Scrolling navbar</bs-navbar-brand>
    <bs-navbar-toggler aria-label="Toggle navigation" />
    <bs-navbar-collapse id="navbarScrolling">
        <bs-navbar-nav scroll="true" style="--bs-scroll-height: 100px;">
            <bs-navbar-item href="#" is-active="true" aria-current="Page">Home</bs-navbar-item>
            <bs-navbar-item href="#">Link</bs-navbar-item>
            <bs-navbar-dropdown-item btn-style="Secondary">
                Link
                <bs-dropdown-menu>
                    <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
                    <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
                </bs-dropdown-menu>
            </bs-navbar-dropdown-item>
        </bs-navbar-nav>
    </bs-navbar-collapse>
</bs-navbar>

Color schemes

Apply Bootstrap color mode or background utilities through standard attributes and classes. Pair background choices with a matching data-bs-theme so links, toggles, and dropdowns stay legible.

aspnet 

<bs-navbar bg-color="Dark" border-body="true" data-bs-theme="dark" bottom-margin="Default3">
    <bs-navbar-brand href="#">Dark navbar</bs-navbar-brand>
    <bs-navbar-nav>
        <bs-navbar-item href="#" is-active="true" aria-current="Page">Home</bs-navbar-item>
        <bs-navbar-item href="#">Features</bs-navbar-item>
    </bs-navbar-nav>
</bs-navbar>
<bs-navbar bg-color="Primary" data-bs-theme="dark">
    <bs-navbar-brand href="#">Primary navbar</bs-navbar-brand>
    <bs-navbar-nav>
        <bs-navbar-item href="#" is-active="true" aria-current="Page">Home</bs-navbar-item>
        <bs-navbar-item href="#">Features</bs-navbar-item>
    </bs-navbar-nav>
</bs-navbar>
<bs-navbar borders="Bottom" style="background-color: #e3f2fd;" data-bs-theme="light" top-margin="Default3">
    <bs-navbar-brand href="#">Custom light navbar</bs-navbar-brand>
    <bs-navbar-nav>
        <bs-navbar-item href="#" is-active="true" aria-current="Page">Home</bs-navbar-item>
        <bs-navbar-item href="#">Features</bs-navbar-item>
    </bs-navbar-nav>
</bs-navbar>

Placement

Use nav-fixed for fixed placement. Fixed navbars are removed from normal document flow, so pages may need top or bottom padding. These examples are shown as code only to avoid fixing the docs page header while browsing the examples.

aspnet 

<bs-navbar nav-fixed="Top" body-bg-color="Tertiary">
<bs-navbar-brand href="#">Fixed top</bs-navbar-brand>
</bs-navbar>
<bs-navbar nav-fixed="Bottom" body-bg-color="Tertiary">
<bs-navbar-brand href="#">Fixed bottom</bs-navbar-brand>
</bs-navbar>

Responsive behaviors

Use nav-expand to define when a navbar stops collapsing. Omit it for always-collapsed behavior, or choose a breakpoint such as Small, Medium, Large, Xl, or Xxl.

aspnet 

<bs-navbar nav-expand="Large" body-bg-color="Tertiary">
<bs-navbar-brand href="#">Responsive navbar</bs-navbar-brand>
<bs-navbar-toggler />
<bs-navbar-collapse>
    <bs-navbar-nav>
        <bs-navbar-item href="#" is-active="true">Home</bs-navbar-item>
    </bs-navbar-nav>
</bs-navbar-collapse>
</bs-navbar>

Offcanvas

Bootstrap supports offcanvas menus inside navbars. Capture bs-navbar-offcanvas with a toggler and the navbar wires the offcanvas target automatically. Keep the offcanvas placement and responsive navbar behavior aligned with the intended mobile navigation layout.

aspnet 

<bs-navbar>
    <bs-navbar-brand href="#">Offcanvas navbar</bs-navbar-brand>
    <bs-navbar-toggler aria-label="Toggle offcanvas navigation" />
    <bs-navbar-offcanvas placement="End">
        <bs-offcanvas-header off-canvas-title="Offcanvas">
            <bs-close-button data-bs-dismiss="offcanvas" aria-label="Close" />
        </bs-offcanvas-header>
        <bs-offcanvas-body>
            <bs-navbar-nav>
                <bs-navbar-item href="#" is-active="true" aria-current="Page">Home</bs-navbar-item>
                <bs-navbar-item href="#">Link</bs-navbar-item>
                <bs-navbar-dropdown-item btn-style="Secondary">
                    Dropdown
                    <bs-dropdown-menu>
                        <bs-dropdown-menu-item href="#">Action</bs-dropdown-menu-item>
                        <bs-dropdown-menu-item href="#">Another action</bs-dropdown-menu-item>
                    </bs-dropdown-menu>
                </bs-navbar-dropdown-item>
            </bs-navbar-nav>
        </bs-offcanvas-body>
    </bs-navbar-offcanvas>
</bs-navbar>

CSS variables

Bootstrap exposes navbar CSS variables for padding, brand sizing, colors, hover states, disabled states, toggler icons, and transition behavior. BCL emits the navbar structure; theme customization belongs in the site stylesheet.

Sass variables

Bootstrap's Sass variables define navbar spacing, color defaults, brand sizing, and responsive expansion behavior before runtime CSS variables are emitted.