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 |