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.

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