Default layout is used in most pages and has the following structure as you can view in views/layouts/dashboard/#index.hbs
In this layout sidebar starts from top and navbar is inside .main-content
html/starter.html page.It's a minimal (empty) page included to make it easy to easily figure out the main layout without having to look through "layouts" files.
<!doctype html>
<html lang="en">
<head>
{{> layout/_commons/_head}} <!-- contains title, meta tags, stylesheets, etc -->
</head>
<body>
<div class="body-container">
<div id="navbar" class="navbar navbar-blue navbar-fixed">
<!-- navbar content -->
</div>
<div class="main-container bgc-white">
<div id="sidebar" class="sidebar sidebar-fixed expandable sidebar-light">
<!-- sidebar content -->
</div><!-- /.sidebar -->
<div class="main-content">
<div class="page-content container container-plus">
<!-- page content -->
</div>
<div id="footer" class="footer">
<!-- footer content -->
</div>
</div><!-- /.main-content -->
</div><!-- /.main-container -->
</div>
{{> layout/_commons/_tail}} <!-- contains required scripts, etc -->
</body>
</html>
As you can see in views/layouts/_commons/_head.hbs, it contains title tag, meta tags (viewport, charset, etc),
list of stylesheets used in all pages and in a specific page, fonts, and ace.css:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<title>Page Title</title>
<!-- include common stylesheets used in demo pages -->
<link href="/path/to/bootstrap.css" rel="stylesheet" />
<link href="/path/to/fontawesome or other icon set.css" rel="stylesheet" />
<link href="/path/to/my-selected-font.css" rel="stylesheet" /> <!-- or direct link to Google fonts -->
<!-- include vendor stylesheets used in this page -->
<link href="/path/to/plugin1.css" rel="stylesheet" />
<link href="/path/to/plugin2.css" rel="stylesheet" />
<!-- include Ace styles -->
<link href="/path/to/ace.css" rel="stylesheet" />
<!-- include app styles -->
<link href="/path/to/my-app.css" rel="stylesheet" />
As you can see in views/layouts/_commons/_tail.hbs, it contains required scripts:
<!-- include common scripts used in demo pages -->
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/popper.js"></script>
<script type="text/javascript" src="/path/to/boostrap.js"></script>
<!-- include vendor scripts used in this page -->
<script type="text/javascript" src="/path/to/plugin1.js"></script>
<script type="text/javascript" src="/path/to/plugin2.js"></script>
<!-- include Ace script -->
<script type="text/javascript" src="/path/to/ace.js"></script>
<!-- include app script -->
<script type="text/javascript" src="/path/to/my-app.js"></script>
This layout is used for Starter page and is similar to main layout. Its sidebar and navbar have little content to make it easy to figure out the general layout and structure.
This layout is used for Dashboard 2 page.
It has different layout from main dashboard. Sidebar starts from page top and navbar is inside content area.
<div class="body-container">
<div class="main-container">
<div id="sidebar" class="sidebar sidebar-dark sidebar-color sidebar-fixed expandable" data-swipe="true" data-backdrop="true" data-dismiss="true">
<!-- sidebar content -->
</div>
<div class="main-content">
<div id="navbar" class="navbar navbar-white navbar-fixed">
<!-- navbar content -->
</div>
<div role="main" class="page-content container container-plus">
<!-- page content -->
</div>
<div id="footer" class="footer">
<!-- footer content -->
</div>
</div>
</div>
</div>
The layout in Dashboard 3 is similar to main Dashboard 2 layout. There are only some changes to initial navbar and sidebar themes, content and boxed layout.
The layout in Dashboard 4 is similar to main Dashboard layout. There are only some changes to initial navbar and sidebar themes, content and boxed layout.
Horizontal menu is not different. You sould add required .sidebar-h and .sidebar-hover etc class names to sidebar. See here
Sidebar can be inserted right after .navbar like the following example or inside content area as described later below in Two Menus Layout.
<div class="body-container">
<div id="navbar" class="navbar navbar-sm navbar-fixed-xl navbar-expand-lg navbar-white">
<!-- navbar content -->
</div>
<div id="sidebar" class="sidebar sidebar-fixed sidebar-hover sidebar-h sidebar-white sidebar-top" data-swipe="true" data-backdrop="true" data-dismiss="true">
<!-- sidebar content -->
</div>
<div class="main-container">
<div role="main" class="main-content">
<div class="page-content container container-plus px-md-4 px-xl-5">
<!-- page content -->
</div>
{{> layout/horizontal/footer}}
</div>
</div>
</div>
You can have two (or more) menus. There is an example in Ace's demo.
Like in Two Menus demo page, main menu is vertical (on left or right) and 2nd menu is horizontal and is inside content area:
<div class="main-container">
<div class="sidebar expandable sidebar-fixed" id="sidebar1" data-dismiss="true" data-backdrop="true">
<!-- vertical sidebar -->
</div>
<div class="main-content">
<div class="navbar navbar-fixed-xl">
<!-- optional navbar, and fixed only below 'xl' when sidebars are hidden -->
</div>
<div class="sidebar sidebar-h sidebar-hover collapsed-h" id="sidebar2">
<!-- horizontal sidebar -->
</div>
<div class="page-content container px-xl-5">
<!-- content -->
</div><!-- /.page-content -->
</div>
</div>
Login page has no special extra elements. There's no sidebar or navbar and there are 3 options:
- The default one when you open login page
- The compact one when you click Remove this section
- Fullpage (fullscreen) view when you click Make full-size
Please refer to Login Page for more details.
Landing page and coming soon have no special or extra elements. See here for more info.