--- title: Navigation Bar --- ## Navigation Bar The Bootstrap framework provides you with a feature call navigation bars. In short a navigation bar (also referred to navbars) is a header at the top of the page to display navigational information. #### How To Use To use Bootstrap Navigation Bars you add a `

` element to the top inside the `` element of your webpage. There are various styles you can add to customize the display of your navbars. #### Code Example This is the code needed to make a basic navbar. ```html ``` #### Navbar Styles Bootstrap provides a set of classes in the Bootstrap framework to style your navbars. These classes are as followed: * `navbar navbar-default` This is the default style for your navbars. * `navbar navbar-inverse` This is similar to the default style except the colors are inverted. #### Adding drop-down menus to the navbar You can include a drop down menu inside a navbar. This feature requires you to include Bootstrap's javascript file for it to work. ```html ``` #### Adding buttons to the navbar You can add buttons on the navbar. The existing Bootstrap Button classes work however you'll need to include the class `navbar-btn` to the end of the class list. ```html ``` #### Adding forms to the navbar You can also add forms to the navbar. This could be uses for tasks such as a search field, quick login field, etc. ```html ``` #### Aligning elements to the right on the navbar In some cases you might want to align elements in a navbar to the right (for example a login or sign-up button.). To do this you'll need to use the `navbar-right` class. ```html ``` #### Displaying the navbar independent of scrolling In some cases you might want to keep the navbar at the top or bottom of the screen regardless of scrolling. You will need to add either the `navbar-fixed-top` or `navbar-fixed-bottom` class to the `

` element. ```html ``` #### Collapsing the navbar On a small screen (such as a phone or tablet) the navbar is going to take up too much space. Luckily the option to collase the navbar exists. You can accomplish this using the following example. ```html ``` #### Navbar Examples `navbar navbar-default` `navbar navbar-inverse` #### More Information: [BootStrap navbar documentation](https://getbootstrap.com/docs/4.0/components/navbar/)