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.
With Bootstrap, 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 consists of Bootstrap 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.
Add .navbar-dark
and .bg-*
classes to apply background color to the navbar based on your color theme.
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 can contain some text. Add .navbar-text
to maintain the vertical alignment and spacing of the text.
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.
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 |