Navbar
Bootstrap 4 Navbar with Material Design UI
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 4 Navbar
With Bootstrap 4, a navbar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-expand-lg">.
Propeller Navbar with Sidebar
Propeller Navbar consists of Bootstrap 4 HTML structure with Propeller customized classes. Add .pmd-navbar followed by .navbar to apply material design standards to it. As the navigation bar takes up too much space on a small screen, for better user experience we have customized the navbar to open as a sidebar in mobile view. Add .pmd-navbar-toggle immediately followed by .navbar-toggler to trigger the sidebar and use .pmd-navbar-sidebar followed by navbar-collapse to properly display the links in it.
Navbar based on Color Schemes
Add .navbar-dark and .bg-* classes to apply background color to the navbar based on your color theme.
Navbar with Profile Dropdown
Add .pmd-user-info for creating a navbar with user information. To right align the Profile Dropdown add .ml-auto class.
Navbar with Search
We can add search section in the Navbar. It will help in searching elements in the page.
Navbar with Text
Navbar can contain some text. Add .navbar-text to maintain the vertical alignment and spacing of the text.
Breakpoint-Specific Responsive Behavior
Use .navbar-expand-{sm|md|lg|xl} followed by navbar to display the navigation as a sidebar till that screen size. For example the following navigation bar will be displayed as a sidebar for screen size >= 768px.
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 |