# Navbar This component is used to create a navigation bar. ## Usage To create a navigation bar, apply the ```.navbar``` class to a ```

``` element. Navigation bars can support multiple content types: | Class | Description | | ------ | ------- | | ```.navbar-left``` | Aligns content to the left | | ```.navbar-center``` | Allows content to be aligned centrally | | ```.navbar-right``` | Aligns content to the right | | ```.navbar-brand``` | Contains the name or logo of the site | | ```.navbar-item``` | Contains various elements such as a button or a form field | | ```.navbar-nav``` | Allows to contain a menu |

```html ``` ----------- ## Alignment containers If you need to align the contents of the navigation bar, use the alignment containers. To align content to the left, add the ```.navbar-left``` class to a ```

``` element. To align content to the right, add the ```.navbar-right``` class to a ```

``` element. To align content to center, add the ```.navbar-left``` class to a ```

``` element.

```html ``` !!!Note It is recommended that the right and left alignment container not be used simultaneously with the center alignment container for perfect centering.

```html ``` ----------- ## Brand For create a navbar brand element, add the ```.navbar-brand``` class to a `````` element. You can insert the site name or a logo image.

```html ``` ----------- ## Nav To create a horizontal navigation list in the navigation bar, add the ```.navbar-nav``` class to a ```

``` element. ```html ``` ----------- ## Dropdown You can insert a dropdown within an element of a navigation list as in the following example.

```html ``` !!!Important The dropdown to be displayed at the click of a button is automatically detected if a ```.dropdown``` element is placed directly after the button. If not, you must initialize the dropdown with ```toggle``` option. For more information on dropdown, see the [Dropdown components](dropdown.md). -----------