##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Navbar

Navbars are essential navigation components that provide a consistent and intuitive way to navigate through your application. They are highly customizable, responsive by default, and support various elements like branding, navigation links, forms, and more. The navbar automatically adjusts its layout for optimal viewing on different screen sizes.

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

Example
Loading...
Example
Loading...

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

Navigation Link Sizes
Loading...
Navigation Link Sizes
Loading...

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

Brand Text as a Heading
Loading...
Brand Text as a Heading
Loading...

### Image

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

Image
Loading...
Image
Loading...

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

Image and Text
Loading...
Image and Text
Loading...

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

Forms
Loading...
Forms
Loading...

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

Text
Loading...
Text
Loading...

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

Color Schemes
Loading...
Color Schemes
Loading...

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

Contained Navbar
Loading...
Contained Navbar
Loading...

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

Default Position
Loading...
Default Position
Loading...
Sticky Top Navigation
Loading...
Sticky Top Navigation
Loading...
Sticky Bottom Navigation
Loading...
Sticky Bottom Navigation
Loading...

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

Scrolling
Loading...
Scrolling
Loading...

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

Basic Toggler with Hidden Brand
Loading...
Basic Toggler with Hidden Brand
Loading...

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

Right-aligned Toggler
Loading...
Right-aligned Toggler
Loading...

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

Left-aligned Toggler
Loading...
Left-aligned Toggler
Loading...

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

External Collapsible Content
Loading...
External Collapsible Content
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates