PxNavbar

PxNavbar extends the default Bootstrap's navbar.

Basic

Page content.

Buttons

Page content.

Forms

Page content.

Text

Page content.

Navs

Page content.

Nav with image

Page content.

Icon

Page content.

Labels

Page content.

Custom dropdown content

On extra small and small screens, a .dropdown-toggle element with [href!='#'] will behave as a regular link.

Page content.

Fixed

To make the navbar fixed on top of the page, add the .px-navbar-fixed class to the .px-navbar's parent element. 


<body class="px-navbar-fixed">
  <nav class="navbar px-navbar">
    ...
  </nav>
</body>

Using with PxNav

For the proper positioning, place the the .px-navbar between .px-nav and .px-content elements.

If you are using fixed-positioned nav, you also need to make the navbar fixed.
Page content.

Initializing

PxNavbar plugin has no custom options.

PxNavbar plugin is initialized on pre-existing markup.


$('#navbar').pxNavbar();

Usage


require(['jquery', 'px/plugins/px-navbar'], function($) {
  ...
});

Lazy initialization

In common cases, you don't need to initialize PxNavbar instance manually – it will be initialized automatically on the .navbar-toggle button click. 


<nav class="navbar px-navbar">
  <div class="navbar-header">
    ...
  </div>

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#px-navbar-collapse" aria-expanded="false"><i class="navbar-toggle-icon"></i></button>

  <div class="navbar-collapse collapse" id="px-navbar-collapse" aria-expanded="false">
    ...
  </div>
</nav>

Methods

You can call a public method of PxNavbar instance using the syntax: 


$('#navbar').pxNavbar('methodName');

Method name Description
updateScrollbar Update the navbar's scrollbar.
destroy Destroy the PxNavbar instance.

Usage

To use PxNavbar plugin, you need to include the next scripts:


<script src="path/to/js/pixeladmin/plugins/px-navbar.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-navbar.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['px-navbar']);

Alternatively, you can include PxNavbar plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'px-navbar',
    files: [
      'path/to/js/pixeladmin/plugins/px-navbar.js',
      'path/to/js/pixeladmin/directives/angular-px-navbar.js',
    ],
  },
]);

px-navbar directive

Specify template-url attribute on the element to load navbar content from a template.

NOTE: The template-url attribute expects an angular expression instead of a literal string. 


<px-navbar>...content...</px-navbar>
<px-navbar template-url="'path/to/navbar/template.html'"></px-navbar>

You can use px-navbar directive where you want. And when the scope is destroyed the directive will be destroyed.

Default
Content

Content

Instance

You can define instance attribute to get a pointer to PxNavbar element: 


<px-navbar instance="ctrl.$navbar">...</px-navbar>
        

function SomeController() {
  // Pointer
  this.$navbar = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$navbar('updateScrollbar');
});