Navbar

Example

This navbar includes a collapsible, responsive design with a brand logo, navigation links, a dropdown menu, a search form, and a toggle button for mobile views. The navbar-expand-lg class ensures the navbar expands on large screens, while it collapses on smaller screens with a toggleable button.

Sizing Variations

Nav links and nav items can be sized using different classes. You can apply sizes directly to nav-links using nav-link-* classes or to nav-items using nav-item-* classes, where * can be xs, sm, lg, or xl.

Brand

The navbar-brand class in Bootstrap is used to define the branding or logo section of a navbar, typically linking to the homepage or main site.

Text

You can place your text inside an element with the navbar-brand class.

Image

You can also add an image inside an element with the navbar-brand class.

Image and text

You can also add both an image and text to the navbar brand by applying the d-inline-block and align-text-top classes to the img.

Forms

Forms in a navbar can be easily added by placing form elements like search inputs and buttons within the navbar's structure, ensuring they are responsive and aligned properly.

Text

The navbar-text class in Bootstrap is used to add plain text to a navbar, aligning it with other navbar items without any additional styling or behavior.

Color Schemes

Bootstrap navbars support multiple color schemes to match your application's design. Use predefined classes like bg-dark with data-bs-theme="dark" for dark themes, bg-primary for branded colors, or custom background colors. Each theme automatically adjusts text and icon colors for optimal contrast and readability.

Container Options

Navbars can be wrapped in different container types to control their width and positioning. Using the standard container class creates a responsive, centered navbar with maximum widths at each breakpoint, while container-fluid spans the full width of the viewport. This flexibility allows you to match your navbar's container style with your overall layout strategy.

Placement Options

Bootstrap offers multiple positioning options for navbars to suit different layout needs. The default position follows normal document flow, while sticky-top and sticky-bottom create navbars that remain visible at their respective positions during scrolling. These placement options help create intuitive navigation experiences that maintain accessibility regardless of scroll position.

Scrolling

The navbar-nav-scroll class allows the navigation items in the navbar to become scrollable when they exceed a specified height. This makes the navbar more compact and ensures that navigation links are accessible without overwhelming the page layout.

Responsive behaviors

In Bootstrap, navbars are responsive, adjusting based on screen size using classes like navbar-expand-* (e.g., navbar-expand-lg), which control when the navbar should collapse. The navbar-toggler class creates a button to toggle the navbar on smaller screens, while navbar-collapse manages the collapsible content. These elements work together to create a navbar that is horizontally displayed on large screens and collapses into a toggleable menu on smaller ones.

Toggler Variations

The navbar toggler is a crucial component for responsive navigation, appearing on smaller screens to control the visibility of navbar content. The navbar-toggler class creates an expandable/collapsible button that works seamlessly with the data-bs-toggle="collapse" attribute. The examples below demonstrate different toggler positions and behaviors to suit various design needs.

This variation shows the brand name on the left with the toggler positioned on the right, a common layout pattern in modern web applications.

For a unique layout, this example places the toggler on the left side while maintaining the brand name's visibility.

External Content

Sometimes you may want to toggle content that exists outside of the navbar itself. The collapse class can be used to control external content, creating an expandable section that's triggered by the navbar toggler. This pattern is useful for creating slide-down notifications, alerts, or additional navigation options that don't fit within the standard navbar layout.