Warning: session_start(): open(/var/lib/php/fpm/session/sess_ik6f2rju1mhfticuk33572acb9, O_RDWR) failed: No such file or directory (2) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Angular Mobile Navbar - Bootstrap 4 & Material Design. - Material Design for Bootstrap

Angular Mobile navbar

Angular Mobile Navbar - Bootstrap 4 & Material Design

Angular Mobile Bootstrap 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.

Basic example


        <ActionBar title="Navbar">
          <ActionItem
            ios.systemIcon="16"
            ios.position="right"
            text="Home"
            android.position="popup"
          ></ActionItem>
          <ActionItem
            ios.systemIcon="16"
            ios.position="right"
            text="Features"
            android.position="popup"
          ></ActionItem>
          <ActionItem
            ios.systemIcon="16"
            ios.position="right"
            text="Pricing"
            android.position="popup"
          ></ActionItem>
        </ActionBar>
      

Colorful navbars


          <ActionBar title="Navbar" backgroundColor="#4285f4">
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Home"
              android.position="popup"
            ></ActionItem>
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Features"
              android.position="popup"
            ></ActionItem>
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Pricing"
              android.position="popup"
            ></ActionItem>
          </ActionBar>

          <ActionBar title="Navbar" backgroundColor="#ff3547">
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Home"
              android.position="popup"
            ></ActionItem>
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Features"
              android.position="popup"
            ></ActionItem>
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Pricing"
              android.position="popup"
            ></ActionItem>
          </ActionBar>

          <ActionBar title="Navbar" backgroundColor="#00c851">
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Home"
              android.position="popup"
            ></ActionItem>
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Features"
              android.position="popup"
            ></ActionItem>
            <ActionItem
              ios.systemIcon="16"
              ios.position="right"
              text="Pricing"
              android.position="popup"
            ></ActionItem>
          </ActionBar>
        

Angular Mobile Navbar - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of mobile navbar component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Mobile Navbars:

      // For MDB Angular Mobile Free
      import { NativeScriptModule } from 'nativescript-angular'
    

Components

ActionBar

Selector: ActionBar