/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/components
Edit: /var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md (35578B)
---
layout: docs
title: Navbar
description: Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
group: components
toc: true
---
## How it works
Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
- Ensure accessibility by using a `
` element or, if using a more generic element such as a ``, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
- Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.
{{< callout info >}}
{{< partial "callouts/info-prefersreducedmotion.md" >}}
{{< /callout >}}
## Supported content
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
- `.navbar-brand` for your company, product, or project name.
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns).
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors.
- Flex and spacing utilities for any form controls and actions.
- `.navbar-text` for adding vertically centered strings of text.
- `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint.
- Add an optional `.navbar-scroll` to set a `max-height` and [scroll expanded navbar content](#scrolling).
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{{< example >}}
{{< /example >}}
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
### Brand
The `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
#### Text
Add your text within an element with the `.navbar-brand` class.
{{< example >}}
Navbar
{{< /example >}}
#### Image
You can replace the text within the `.navbar-brand` with an `
`.
{{< example >}}
{{< /example >}}
#### Image and text
You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `
`.
{{< example >}}
{{< /example >}}
### Nav
Navbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
Add the `.active` class on `.nav-link` to indicate the current page.
Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
{{< example >}}
{{< /example >}}
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{{< example >}}
{{< /example >}}
You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{{< example >}}
{{< /example >}}
### Forms
Place various form controls and components within a navbar:
{{< example >}}
{{< /example >}}
Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
{{< example >}}
{{< /example >}}
Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `