Horizontal menu configuration
If you would like to have Horizontal Menu (or Topnav) based layout,
- HTML
-
Simply update
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorate="~{layouts/layout-horizontal}">.
In order to add, change or remove any ui elements from the top
bar, simply edit in
file
src/main/resources/templates/topnavbar.html.
The change would reflect in all the files automatically.
How to use pre-built layouts?
Each of the layout options is provided below with steps
you would need to
perform in the
src/main/resources/templates/layouts/**
pages:
Topbar Light
Keep your body element with data attributedata-topbar="light" data-layout="horizontal"
E.g.
<body data-topbar="light" data-layout="horizontal">
to have light topbar and dark menubar.
Colored Header
Keep your body element with data attributedata-topbar="colored" data-layout="horizontal"
E.g.
<body data-topbar="colored" data-layout="horizontal">
to have colored topbar and dark menubar.
Boxed Layout
Keep your body element with data attributedata-layout-size="boxed" data-layout="horizontal"
E.g.
<body data-layout-size="boxed" data-layout="horizontal">
to have boxed layout.
Scrollable
Keep your body element with data attributedata-layout-scrollable="true" data-layout="horizontal"
E.g.
<body data-layout-scrollable="true" data-layout="horizontal" >
to have scrollable layout.
Preloader
In order to add pre-loader in your page, include following html afterbody element.
<div id="preloader">
<div id="status">
<div class="spinner-chase">
<div class="chase-dot"></div>
<div class="chase-dot"></div>
<div class="chase-dot"></div>
<div class="chase-dot"></div>
<div class="chase-dot"></div>
<div class="chase-dot"></div>
</div>
</div>
</div>