App Bar

The App bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.

To show this type of App bar you will need this code in down here.

    <AppBar position="static" color="inherit">
        <Toolbar>
            <IconButton className="jr-menu-icon" aria-label="Menu">
                <span className="menu-icon bg-grey"/>
            </IconButton>
            <h4 className="mb-0">Company Name</h4>
        </Toolbar>
    </AppBar>

   

Fully Featured App bar

<AppBar className="app-main-header" position="static">
    <Toolbar>
        <IconButton className="jr-menu-icon" aria-label="Menu">
            <span className="menu-icon"/>
        </IconButton>

        <h4 className="mb-0 mr-auto">Company Name</h4>

        <SearchBox styleName="d-none d-sm-block"/>

        <Button size="small" className="ml-3 text-white d-none d-sm-block">Login</Button>

        <div className="d-inline-block d-sm-none list-inline-item">
            <Dropdown
                    className="quick-menu nav-searchbox"
                    isOpen={this.state.searchBox}
                    toggle={this.onSearchBoxSelect.bind(this)}>

                <DropdownToggle
                        className="d-inline-block"
                        tag="span"
                        data-toggle="dropdown">
                    <IconButton className="icon-btn size-30">
                        <i className="zmdi zmdi-search zmdi-hc-fw"/>
                    </IconButton>
                </DropdownToggle>

                <DropdownMenu right className="p-0">
                    <SearchBox styleName="search-dropdown" placeholder=""
                               onChange={this.updateSearchText.bind(this)}
                               value={this.state.searchText} />
                </DropdownMenu>
            </Dropdown>
        </div>

        <ul className="header-notifications list-inline ml-3 d-none d-sm-block">

            <li className="list-inline-item">
                <i className="zmdi zmdi-notifications-active zmdi-hc-lg zmdi-hc-fw"/>
            </li>
            <li className="list-inline-item">
                <i className="zmdi zmdi-comment-alt-text zmdi-hc-lg zmdi-hc-fw"/>
            </li>
        </ul>

        <Avatar className="ml-3 ml-lg-5 d-none d-sm-block" alt="Remy Sharp"
                src="assets/images/userAvatar/stella-johnson.png"/>
    </Toolbar>
</AppBar>

        

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
children *	node		The content of the component.
classes	object		Useful to extend the style applied to components.
color	enum: 'inherit' |  'primary' |  'secondary' |  'default'	'primary'	The color of the component. It supports those theme colors that make sense for this component.
position	enum: 'fixed' |  'absolute' |  'sticky' |  'static'	'fixed'	The positioning type. The behavior of the different options is described here. Note: sticky is not universally supported and will fall back to static when unavailable.