# Navbar

Navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It’s easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.

## Bootstrap Navbar

With Bootstrap, a navbar can extend or collapse, depending on the screen size. A standard navigation bar is created with `<``nav class="navbar navbar-default"``>`.

## Propeller Navbar

Navbar requires a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
Add `.pmd-navbar` for proper alignment.

## Navbar with Profile Dropdown

The `.pull-right` class is used to right-align Profile dropdown.

## Navbar Collapsible with Sidebar

The navigation bar takes up too much space on a small screen. Add `.pmd-navbar-toggle` immediately followed by bootstrap `.navbar-toggle` to hide the navigation bar for mobile resolution and only show it when needed. Use `.pmd-navbar-sidebar` to initiate propeller sidebar function.

## Navbar with Search

We can add search section in the Navbar. It will help in searching elements in the page.

## Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the menu. The table lists the available classes and their effects.

Propeller Class | Effect | Remark
--- | --- | ---
`.pmd-navbar` | Include this class for navbar formatting. | Required
`.pmd-user-info` | Include this class for creating navbar with user information dropdown. | Optional
`.pmd-navbar-toggle` | Include this class to open navbar content in sidebar for low screen resolution. | Optional
`.pmd-navbar-sidebar` | Include this class to initiate propeller sidebar function. | Optional
`.pmd-sidebar-overlay` | Include this class to highlight sidebar with overlay effect in low resolution. | Optional
`.pmd-navbar-right-icon` | Include this class to align icon to right side of navbar. | Optional