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.


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