JavaScript (ES5)

Search results

Design in JavaScript (ES5) AppBar control

08 May 2023 / 6 minutes to read

Spacer

Spacer is used to provide spacing between the AppBar contents which gives additional space to the content layout.

The following example depicts the code to provide spacing between the home and pan buttons in the AppBar:

Source

Preview

index.js

index.html

var defaultAppBarObj = new ej.navigations.AppBar({
    colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");

var defaultButtonHomeObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-home' });
defaultButtonHomeObj.appendTo('#defaultButtonHome');

var defaultButtonCutObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-cut' });
defaultButtonCutObj.appendTo('#defaultButtonCut');

var defaultButtonPanObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-pan' });
defaultButtonPanObj.appendTo('#defaultButtonPan');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 - AppBar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="control-section default-appbar-section">
            <div class="control-container">
                <header id="defaultAppBar">
                    <button id="defaultButtonHome"></button>
                    <div class="e-appbar-spacer"></div>
                    <button id="defaultButtonCut"></button>
                    <div class="e-appbar-spacer"></div>
                    <button id="defaultButtonPan"></button>
                </header>
            </div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Separator

Separator shows a vertical line to visually group or separate the AppBar contents.

The following example depicts the code to provide a vertical line between a group of buttons in the AppBar.

Source

Preview

index.js

index.html

styles.css

var defaultAppBarObj = new ej.navigations.AppBar({
    colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");

var defaultButtonCutObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-cut' });
defaultButtonCutObj.appendTo('#defaultButtonCut');

var defaultButtonCopyObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-copy' });
defaultButtonCopyObj.appendTo('#defaultButtonCopy');

var defaultButtonPasteObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-paste' });
defaultButtonPasteObj.appendTo('#defaultButtonPaste');

var defaultButtonBoldObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-bold' });
defaultButtonBoldObj.appendTo('#defaultButtonBold');

var defaultButtonUnderlineObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-underline' });
defaultButtonUnderlineObj.appendTo('#defaultButtonUnderline');

var defaultButtonItalicObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-italic' });
defaultButtonItalicObj.appendTo('#defaultButtonItalic');

var defaultButtonAlignLeftObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-align-left' });
defaultButtonAlignLeftObj.appendTo('#defaultButtonAlignLeft');

var defaultButtonAlignRightObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-align-right' });
defaultButtonAlignRightObj.appendTo('#defaultButtonAlignRight');

var defaultButtonAlignCenterObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-align-center' });
defaultButtonAlignCenterObj.appendTo('#defaultButtonAlignCenter');

var defaultButtonJustifyObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-justify' });
defaultButtonJustifyObj.appendTo('#defaultButtonJustify');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 - AppBar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="control-section default-appbar-section">
            <div class="control-container">
                <header id="defaultAppBar">
                    <button id="defaultButtonCut"></button>
                    <button id="defaultButtonCopy"></button>
                    <button id="defaultButtonPaste"></button>
                    <div class="e-appbar-separator"></div>
                    <button id="defaultButtonBold"></button>
                    <button id="defaultButtonUnderline"></button>
                    <button id="defaultButtonItalic"></button>
                    <div class="e-appbar-separator"></div>
                    <button id="defaultButtonAlignLeft"></button>
                    <button id="defaultButtonAlignRight"></button>
                    <button id="defaultButtonAlignCenter"></button>
                    <button id="defaultButtonJustify"></button>
                </header>
            </div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#defaultAppBar .e-btn.e-inherit {
  margin: 0 3px;
}

Media Query

Media Query is used to adjusting the AppBar for different screen sizes. Resize the screen to observe the responsive layout of the AppBar.

Source

Preview

index.js

index.html

styles.css

var defaultAppBarObj = new ej.navigations.AppBar({
    colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");

var defaultButtonMenuObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
defaultButtonMenuObj.appendTo('#defaultButtonMenu');

var defaultButtonHomeObj = new ej.buttons.Button({ cssClass: 'e-inherit', content: 'Home' });
defaultButtonHomeObj.appendTo('#defaultButtonHome');

var defaultButtonAboutObj = new ej.buttons.Button({ cssClass: 'e-inherit', content: 'About' });
defaultButtonAboutObj.appendTo('#defaultButtonAbout');

var defaultButtonProductsObj = new ej.buttons.Button({ cssClass: 'e-inherit', content: 'Products' });
defaultButtonProductsObj.appendTo('#defaultButtonProducts');

var defaultButtonContactsObj = new ej.buttons.Button({ cssClass: 'e-inherit', content: 'Contacts' });
defaultButtonContactsObj.appendTo('#defaultButtonContacts');

var defaultButtonLoginObj = new ej.buttons.Button({ cssClass: 'e-inherit', content: 'Login' });
defaultButtonLoginObj.appendTo('#defaultButtonLogin');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 - AppBar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="control-section default-appbar-section">
            <div class="control-container">
                <header id="defaultAppBar">
                    <button id="defaultButtonMenu"></button>
                    <button id="defaultButtonHome"></button>
                    <button id="defaultButtonAbout"></button>
                    <button id="defaultButtonProducts"></button>
                    <button id="defaultButtonContacts"></button>
                    <div class="e-appbar-spacer"></div>
                    <div class="e-appbar-separator"></div>
                    <button id="defaultButtonLogin"></button>
                </header>
            </div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#defaultAppBar .e-btn.e-inherit {
  margin: 0 3px;
}
@media screen and (max-width: 1024px) {
  .control-container .e-appbar {
     flex-flow: row wrap;
     height: auto;
     gap: 8px;
  }
  .control-container {
     width: 350px;
  }
}
@media screen and (max-width: 480px) {
  .control-container {
     width: 200px;
     margin: 0 2px;
  }
}

AppBar is rendered with a Menu component in its AppBar header area. Menu component’s styles are inherited from the AppBar component using the e-inherit CSS class.

Source

Preview

index.js

index.html

styles.css

var companyMenuItems = [
    {
        text : 'Company',
        items: [
            { text: 'About Us' },
            { text: 'Customers' },
            { text: 'Blog' },
            { text: 'Careers' }
        ]
    }
];

var productMenuItems = [
    {
        text : 'Products',
        items: [
            { text: 'Developer' },
            { text: 'Analytics' },
            { text: 'Reporting' },
            { text: 'Help Desk' }
        ]
    }
];

var aboutMenuItems = [
    {
        text : 'About Us'
    }
];

var carrerMenuItems = [
    {
        text : 'Carrers'
    }
];

var defaultAppBarObj = new ej.navigations.AppBar({
    colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");

var defaultButtonMenuObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
defaultButtonMenuObj.appendTo('#defaultButtonMenu');

var defaultMenuCompanyObj = new ej.navigations.Menu({ cssClass: 'e-inherit', items: companyMenuItems });
defaultMenuCompanyObj.appendTo('#defaultMenuCompany');

var defaultMenuProductsObj = new ej.navigations.Menu({ cssClass: 'e-inherit', items: productMenuItems });
defaultMenuProductsObj.appendTo('#defaultMenuProducts');

var defaultMenuAboutObj = new ej.navigations.Menu({ cssClass: 'e-inherit', items: aboutMenuItems });
defaultMenuAboutObj.appendTo('#defaultMenuAbout');

var defaultMenuCarrersObj = new ej.navigations.Menu({ cssClass: 'e-inherit', items: carrerMenuItems });
defaultMenuCarrersObj.appendTo('#defaultMenuCarrers');

var defaultButtonLoginObj = new ej.buttons.Button({ cssClass: 'e-inherit', content: 'Login' });
defaultButtonLoginObj.appendTo('#defaultButtonLogin');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 - AppBar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="control-section default-appbar-section">
            <div class="control-container">
                <header id="defaultAppBar">
                    <button id="defaultButtonMenu"></button>
                    <ul id="defaultMenuCompany"></ul>
                    <ul id="defaultMenuProducts"></ul>
                    <ul id="defaultMenuAbout"></ul>
                    <ul id="defaultMenuCarrers"></ul>
                    <div class="e-appbar-spacer"></div>
                    <button id="defaultButtonLogin"></button>
                </header>
            </div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#defaultAppBar .e-btn.e-inherit {
  margin: 0 3px;
}

Designing AppBar with Buttons

The AppBar is rendered with a Button and DropDownButton component in its AppBar header area. Button and DropDownButton components’ styles are inherited from the AppBar component using the e-inherit CSS class.

Source

Preview

index.js

index.html

styles.css

var productDropDownButtonItems = [
    { text: 'Developer' },
    { text: 'Analytics' },
    { text: 'Reporting' },
    { text: 'E-Signature' },
    { text: 'Help Desk' }
];

var defaultAppBarObj = new ej.navigations.AppBar({
    colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");

var defaultButtonMenuObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
defaultButtonMenuObj.appendTo('#defaultButtonMenu');

var defaultDropDownButtonProductObj = new ej.splitbuttons.DropDownButton({ cssClass: 'e-inherit', items: productDropDownButtonItems });
defaultDropDownButtonProductObj.appendTo('#defaultDropDownButtonProduct');

var defaultButtonLoginObj = new ej.buttons.Button({ cssClass: 'e-inherit', content: 'Login' });
defaultButtonLoginObj.appendTo('#defaultButtonLogin');

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 - AppBar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="control-section default-appbar-section">
            <div class="control-container">
                <header id="defaultAppBar">
                    <button id="defaultButtonMenu"></button>
                    <button id="defaultDropDownButtonProduct">Products</button>
                    <div class="e-appbar-spacer"></div>
                    <button id="defaultButtonLogin"></button>
                </header>
            </div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#defaultAppBar .e-btn.e-inherit {
  margin: 0 3px;
}

The AppBar is rendered with the SideBar component below the AppBar. Click on the menu icon to expand/collapse the Sidebar. In the following sample, the toggle method has been used to show or hide the Sidebar on the AppBar button click.

Source

Preview

index.js

index.html

styles.css

var data = [
    {
        nodeId: '01', nodeText: 'Installation',
    },
    {
        nodeId: '02', nodeText: 'Deployment',
    },
    {
        nodeId: '03', nodeText: 'Quick Start',
    },
    {
        nodeId: '04', nodeText: 'Components',
        nodeChild: [
            { nodeId: '04-01', nodeText: 'Calendar' },
            { nodeId: '04-02', nodeText: 'DatePicker' },
            { nodeId: '04-03', nodeText: 'DateTimePicker' },
            { nodeId: '04-04', nodeText: 'DateRangePicker' },
            { nodeId: '04-05', nodeText: 'TimePicker' },
            { nodeId: '04-06', nodeText: 'SideBar' }
        ]
    }
];
var defaultAppBarObj = new ej.navigations.AppBar({});
defaultAppBarObj.appendTo("#defaultAppBar");

var defaultButtonMenuObj = new ej.buttons.Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
defaultButtonMenuObj.appendTo('#defaultButtonMenu');

defaultButtonMenuObj.element.addEventListener("click", toggle);

var sidebarMenu = new ej.navigations.Sidebar({
    width: '220px',
    target: '.main-content',
    mediaQuery: '(min-width: 600px)',
    isOpen: true
});
sidebarMenu.appendTo('#sideTree');
var inputObj = new ej.inputs.TextBox({
    placeholder: "Search..."
});
inputObj.appendTo("#resSearch");

var mainTreeView = new ej.navigations.TreeView({
    cssClass: "main-treeview",
    fields: { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: "iconCss" },
    expandOn: 'Click'
});
mainTreeView.appendTo('#mainTree');

function toggle() {
    sidebarMenu.toggle();
}

<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 - AppBar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="wrapper" class="control-section default-appbar-section">
            <div class="control-container">
                <div>
                    <header id="defaultAppBar">
                        <button id="defaultButtonMenu"></button>
                        <div class="e-folder">
                            <div class="e-folder-name">Navigation Pane</div>
                        </div>
                    </header>
                </div>
                <aside id="sideTree" class="sidebar-treeview">
                    <div class="main-menu">
                        <div class="table-content">
                            <input id="resSearch">
                            <p class="main-menu-header">TABLE OF CONTENTS</p>
                        </div>
                        <div>
                            <div id="mainTree"></div>
                        </div>
                    </div>
                </aside>
                <div class="main-content" id="main-text">
                    <div class="sidebar-content">
                        <div class="sidebar-heading"> <h4>Responsive Sidebar with Treeview</h4></div>
                        <p class="paragraph-content">
                            This is a graphical aid for visualising and categorising the site, in the style of an expandable and
                            collapsable treeview component.
                            It auto-expands to display the node(s), if any, corresponding to the currently viewed title,
                            highlighting that node(s)
                            and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical
                            browsers),
                            falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered
                            so that
                            unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of
                            the treeview persists across page views in most situations.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

.e-appbar .e-folder {
  margin: 0 5px;
}

#wrapper.control-section {
  padding: 0;
}

.container-fluid {
  padding-right: 0;
  padding-left: 0;
}

#wrapper .sidebar-treeview {
  z-index: 20 !important;
}

#wrapper .main-content {
  height: 380px;
}

.sidebar-treeview .main-menu .main-menu-header {
  color: #656a70;
  padding: 15px 15px 15px 0;
  font-size: 14px;
  width: 13em;
  margin: 0;
}

#main-text .sidebar-heading {
  font-size: 16px;
}

.sidebar-treeview .table-content {
  padding: 20px 14px;
  height: 8em;
}

#main-text .sidebar-content .line {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
  margin: 40px 0;
}

#main-text .sidebar-content {
  padding: 15px;
  font-size: 14px;
}

#main-text .paragraph-content {
  padding: 15px 0;
  font-weight: normal;
  font-size: 14px;
}

.e-folder {
  text-align: center;
  font-weight: 500;
  font-size: 16px
}

.e-folder-name {
  margin-top: 1px;
}

.sidebar-treeview .e-treeview .e-icon-collapsible,
.sidebar-treeview .e-treeview .e-icon-expandable {
  float: right;
  margin: 3px;
}

.sidebar-treeview .e-treeview,
.sidebar-treeview .e-treeview .e-ul {
  padding: 0;
  margin: 0;
}

.sidebar-treeview .e-treeview .e-text-content {
  padding-left: 14px;
}

#wrapper .e-appbar {
  border-bottom: 1px solid #eaeaeae0;
}

.sidebar-treeview {
  border-right: 1px solid #eaeaeae0;
}

Contents

Spacer
Separator
Media Query
Designing AppBar with Menu
Designing AppBar with Buttons
Designing AppBar with SideBar

Contents

Spacer
Separator
Media Query
Designing AppBar with Menu
Designing AppBar with Buttons
Designing AppBar with SideBar

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Design in JavaScript (ES5) AppBar control

Spacer

Separator

Media Query

Designing AppBar with Menu

Designing AppBar with Buttons

Designing AppBar with SideBar