1. Home
  2. Layout
  3. Layout options

Layout options

Contents

Our template includes several layout options.

Standard layout

Standard layout comes with following components: Header, Footer, Sidebar, Main & Aside Menu.

APP HEADER
SIDEBAR

nav-item
nav-item
nav-item
nav-item
MAIN
ASIDE MENU
APP FOOTER
<body class="app">
  <header class="app-header navbar">
    <!-- Header content here -->
  </header>
  <div class="app-body">
    <div class="sidebar">
      <!-- Sidebar content here -->
    </div>
    <main class="main">
      <!-- Main content here -->
    </main>
    <aside class="aside-menu">
      <!-- Aside menu content here -->
    </aside>
  </div>
  <footer class="app-footer">
    <!-- Footer content here -->
  </footer>
</body>

Header options

Fixed position

Position the header element at the top of the viewport, from edge to edge. You have to add .header-fixed to body tag.

<body class="app header-fixed">
  <!-- Body content here -->
</body>

Our template comes with some sidebar options which you can activate in your application

Minimized sidebar

Minimized sidebar has 50px width and only icons are visible. You can change minimized sidebar width in SCSS Files.

APP HEADER
SIDEBAR





MAIN
APP FOOTER
<body class="app sidebar-compact">
  <!-- Body content here -->
</body>

Compact sidebar

Compact sidebar has 150px width. You can change compact sidebar width in SCSS Files.

APP HEADER
SIDEBAR


nav-item


nav-item


nav-item


nav-item

MAIN
APP FOOTER
<body class="app sidebar-compact">
  <!-- Body content here -->
</body>

Hidden sidebar

If you want to hide sidebar you have to add .sidebar-hidden class to body element

APP HEADER
MAIN
APP FOOTER
<body class="app sidebar-hidden">
  <!-- Body content here -->
</body>

Fixed position

Position the sidebar element at the left of the viewport, from edge to edge. You have to add .sidebar-fixed to body tag.

<body class="app sidebar-fixed">
  <!-- Body content here -->
</body>

Aside menu options

Our template comes with some aside menu options which you can activate in your application

Hidden aside menu

If you want to hide aside menu you have to add .aside-menu-hidden class to body element

APP HEADER
SIDEBAR

nav-item
nav-item
nav-item
nav-item
MAIN
APP FOOTER
<body class="app aside-menu-hidden">
  <!-- Body content here -->
</body>

Fixed position

Position the aside meni element at the right of the viewport, from edge to edge. You have to add .aside-menu-fixed to body tag.

<body class="app aside-menu-fixed">
  <!-- Body content here -->
</body>

Fixed position

Position the footer element at the top of the viewport, from edge to edge. You have to add .footer-fixed to body tag.

<body class="app footer-fixed">
  <!-- Body content here -->
</body>