web
mobile
Edit these docs Rate these docs

React Mobile Navbar

React Mobile Navbar - Bootstrap 4 & Material Design

React Mobile navbar is a horizontal navigation component which apart from traditional, text links, might embed also icons.


Basic example

Android
Android navbar
iOS
iOS navbar

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBNavbar } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                    <MDBNavbar>MDBNavbar</MDBNavbar>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
      

Colors examples

Android
Android navbar
iOS
iOS navbar

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBNavbar } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <View>
                  <Navbar color="danger">Navbar</Navbar>
                  <Navbar color="success">Navbar</Navbar>
               </View>
              </ScrollView>
            );
          }
        }

        </script>
        

Icon examples

Android
Android navbar
iOS
iOS navbar

        <script>

        import React, { Component } from "react";
        import {View, ScrollView } from "react-native";
        import { MDBNavbar } from 'mdbreact-mobile';

        export default class ButtonsPage extends Component {

          render() {
            return (
              <ScrollView>
                <Navbar icon={["fab", "mdb"]} iconColor="#fff" iconSize={24}>
                  Navbar
                </Navbar>
              </ScrollView>
            );
          }
        }

        </script>
        
Edit these docs Rate these docs

Navbar - API

In this section you will find advanced information about the Navbar component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


            import { MDBModal } from 'mdbreact-mobile'
      

API Reference: Properties

Name Type Default Description Example
color string primary Color API you can use color from our pallete or set color what you like in HEX, rgb/a or HSL. <MDBNavbar color="rgb(0,0,0)" />
iconColor string #fff iconColor API you can use color from our pallete or set color what you like in HEX, rgb/a or HSL. <MDBNavbar iconColor="rgb(0,0,0)" />
icon string/array #fff Icon API you can use fontawesome icons to put in navbar. If you want use FAB icons you have to use array. <MDBNavbar icon={["fab", "mdb"]} />
iconSize number 16 Set font size to icon. <MDBNavbar iconSize={16} />