# Core Layouts

There's three layout in core same your layouts.

  1. Full Layout
  2. Vertical Layout
  3. Horizontal Layout

Let's dive in what each of them has to offer so you can customize the template and render your own content in our flexible layouts.

# 1. Full Layout

Full layout is really simple it just have layout classes wrapper and default slot.

# 2. Vertical Layout

Vertical layout provides below slots/scoped-slots to render your custom content in component:

Use this scoped slot to render your custom navbar. You need to use this scoped slots to override our template's default navbar, you will not use our demo navbar in your project, right? 😉






 
 
 
 
 
 
 



























<template>
  <layout-vertical>

    <router-view />

    <!-- Using navbar scoped slot -->
    <div
      slot="navbar"
      class="px-1"
    >
      <p class="mb-0">I am in navbar, Everything else is removed</p>
    </div>

    <app-customizer
      v-if="showCustomizer"
      slot="customizer"
    />

  </layout-vertical>
</template>

<script>
import LayoutVertical from '@core/layouts/layout-vertical/LayoutVertical.vue'
import AppCustomizer from '@core/layouts/components/app-customizer/AppCustomizer.vue'
import { $themeConfig } from '@themeConfig'

export default {
  components: {
    AppCustomizer,
    LayoutVertical,
  },
  data() {
    return {
      showCustomizer: $themeConfig.layout.customizer,
    }
  },
}
</script>

Result:

vertical-layout-navbar-slot

Slot Props:

name description type
toggleVerticalMenuActive Toggle visibility of vertical menu (For small screens) function
navbarBackgroundColor Configured bg color of navbar in themeConfig (BS variants) string
navbarTypeClass Navbar wrapper classes (Just for reference) string

# vertical-menu-header (scoped slot)

Use this scoped slot to render your custom vertical nav menu header. Useful for changing title and add extra actions.






 
 
 
 
 
 
 
 



























<template>
  <layout-vertical>

    <router-view />

    <div
      slot="vertical-menu-header"
      class="d-flex align-items-center h-100"
    >
      <h1 class="font-medium-5 mb-0 text-primary">
        Company Name
      </h1>
    </div>

    <app-customizer
      v-if="showCustomizer"
      slot="customizer"
    />

  </layout-vertical>
</template>

<script>
import LayoutVertical from '@core/layouts/layout-vertical/LayoutVertical.vue'
import AppCustomizer from '@core/layouts/components/app-customizer/AppCustomizer.vue'
import { $themeConfig } from '@themeConfig'

export default {
  components: {
    AppCustomizer,
    LayoutVertical,
  },
  data() {
    return {
      showCustomizer: $themeConfig.layout.customizer,
    }
  },
}
</script>

Result:

vertical-layout-vmenu-header-slot

Slot Props:

name description type
toggleVerticalMenuActive Toggle visibility of vertical menu (For small screens' close btn) function
toggleCollapsed Toggle vertical menu collapsed or expanded function
collapseTogglerIcon icon type to show string [unpinned/pinned/close]

# default

This for rendering router-view tag. It doesn't have any slot props.

breadcrumb slot provides full control over rendering breadcrumb however you want.

TIP

You can use our AppBreadcrumb.vue core component as refrence and create custom breadcrumb component.

In future update will try to make it more generic so you don't have to extend it and can use our core component.






 
 
 
 
 
 



























<template>
  <layout-vertical>

    <router-view />

    <div
      slot="breadcrumb"
      class="p-1"
    >
      I am custom breadcrumb
    </div>

    <app-customizer
      v-if="showCustomizer"
      slot="customizer"
    />

  </layout-vertical>
</template>

<script>
import LayoutVertical from '@core/layouts/layout-vertical/LayoutVertical.vue'
import AppCustomizer from '@core/layouts/components/app-customizer/AppCustomizer.vue'
import { $themeConfig } from '@themeConfig'

export default {
  components: {
    AppCustomizer,
    LayoutVertical,
  },
  data() {
    return {
      showCustomizer: $themeConfig.layout.customizer,
    }
  },
}
</script>

Result:

breadcrumb-slot

This is useful to render your content in footer.






 
 
 
 
 



























<template>
  <layout-vertical>

    <router-view />

    <div slot="footer">
      <p class="mb-0">
        &copy; Some Company {{ new Date().getFullYear() }}
      </p>
    </div>

    <app-customizer
      v-if="showCustomizer"
      slot="customizer"
    />

  </layout-vertical>
</template>

<script>
import LayoutVertical from '@core/layouts/layout-vertical/LayoutVertical.vue'
import AppCustomizer from '@core/layouts/components/app-customizer/AppCustomizer.vue'
import { $themeConfig } from '@themeConfig'

export default {
  components: {
    AppCustomizer,
    LayoutVertical,
  },
  data() {
    return {
      showCustomizer: $themeConfig.layout.customizer,
    }
  },
}
</script>

Result:

footer-slot

# customizer

This slot don't have any default rendering. You can use this slot to render customizer in your layout. As there is high chances that you don't want customizer in your project we just provided slot for demo purpose. If you are not using this slot just remove it's code from your layout. Out package provides usage of this slot.

If you are using this slot and themeConfig to toggle customizer make sure you respect theme config option like in blow code snippet.






 
 
 
 






















<template>
  <layout-vertical>

    <router-view />

    <app-customizer
      v-if="showCustomizer"
      slot="customizer"
    />

  </layout-vertical>
</template>

<script>
import LayoutVertical from '@core/layouts/layout-vertical/LayoutVertical.vue'
import AppCustomizer from '@core/layouts/components/app-customizer/AppCustomizer.vue'
import { $themeConfig } from '@themeConfig'

export default {
  components: {
    AppCustomizer,
    LayoutVertical,
  },
  data() {
    return {
      showCustomizer: $themeConfig.layout.customizer,
    }
  },
}
</script>

# 3. Horizontal Layout

Horizontal layout provides below slots/scoped-slots to render your custom content in component:

Same as vertical layout. For rendering your own navbar content.






 
 
 
 
 
 
 
 
 



























<template>
  <layout-horizontal>

    <router-view />

    <!-- Using navbar scoped slot -->
    <div
      slot="navbar"
      class="px-2 py-2"
    >
      <p class="mb-0">
        <span>I am in navbar, Everything else is removed</span>
      </p>
    </div>

    <app-customizer
      v-if="showCustomizer"
      slot="customizer"
    />
  </layout-horizontal>

</template>

<script>
import LayoutHorizontal from '@core/layouts/layout-horizontal/LayoutHorizontal.vue'
import AppCustomizer from '@core/layouts/components/app-customizer/AppCustomizer.vue'
import { $themeConfig } from '@themeConfig'

export default {
  components: {
    LayoutHorizontal,
    AppCustomizer,
  },
  data() {
    return {
      showCustomizer: $themeConfig.layout.customizer,
    }
  },
}
</script>

Result:

horizontal-layout-navbar-slot

Slot Props:

name description type
toggleVerticalMenuActive Toggle visibility of vertical menu (For small screens) function

# vertical-menu-header (scoped slot)

Everything is same as vertical layout. Same vertical menu in rendered in horizontal menu when window breakpoint reaches lg.

# default slot

Same as vertical layout

Same as vertical layout

Same as vertical layout

# customizer slot

Same as vertical layout

Last Updated: 2/26/2021, 3:12:23 PM