A root layout consists of a header, body, sidebar and footer. Content can optionally be passed into the slots which
will be displayed in the respective area. The sidebar is designed to be responsive and will reposition above the
body according to the responsiveBreakpoint prop.
<dt-root-layout :fixed="false" class="d-w100p d-h-500" > <template #header > <div class="d-h-100 d-bgc-purple-100">Header</div> </template> <template #sidebar > <div class="d-w-200 d-h100p d-bgc-black-100"><div>Sidebar item 1</div><div>Sidebar item 2</div><div>Sidebar item 3</div></div> </template> <div class="d-bgc-green-100 d-w100p d-h100p">Content</div> <template #footer > <div class="d-h-100 d-bgc-gold-100">Footer</div> </template> </dt-root-layout>
<div class="d-h-500 d-of-scroll" > <dt-root-layout header-sticky class="d-w100p d-h-500" > <template #header > <div class="d-h-100 d-bgc-purple-100">Header</div> </template> <template #sidebar > <div class="d-w-200 d-h100p d-bgc-black-100"><div>Sidebar item 1</div><div>Sidebar item 2</div><div>Sidebar item 3</div></div> </template> <div class="d-bgc-green-100 d-w100p d-h100p">Content</div> <template #footer > <div class="d-h-100 d-bgc-gold-100">Footer</div> </template> </dt-root-layout> </div>
Root Layout should be used as the top level component for a route. All other components on the page should be nested within one of the root layout's slots. The root layout should not be nested within any other elements or components.
The RootLayout component uses
Content Sectioning
elements <header>, <aside>, <main>, and <footer> which automatically define
ARIA Landmark Roles
on the page.
If you have navigation links contained within any of the slots Root Layout provides these should be enclosed in a <nav> Nav Section.
The RootLayout component will not do this for you.
The sidebar will not automatically wrap to be above the main content by default.
This can be changed via the responsiveBreakpoint prop if desired.
import { DtRootLayout } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | Slot for the main content |
footer | Slot for footer content, be sure to set a height on the element inside this |
header | Slot for header content, be sure to set a height on the element inside this |
sidebar | Slot for sidebar content, be sure to set a width on the element within this. |
Name
|
Default
|
Type
|
|---|---|---|
bodyClass | '' | string|array|object Additional class name for the body |
contentClass | '' | string|array|object Additional class name for the content element |
fixed | true |
"true"
|
"false"
When true, the header, footer and sidebar will be locked in position and the content will
be scrollable. When false the header, footer and sidebar will scroll out of view. |
footerClass | '' | string|array|object Additional class name for the footer element |
headerClass | '' | string|array|object Additional class name for the header element |
headerSticky | false |
"true"
|
"false"
Scroll the header with the page |
responsiveBreakpoint | null |
"'sm'"
|
"'md'"
|
"'lg'"
|
"null"
Defines the breakpoint when the root layout will change to responsive version |
sidebarClass | '' | string|array|object Additional class name for the sidebar element |
sidebarPosition | 'start' |
"start"
|
"end"
|
"left"
|
"right"
Whether the sidebar is on the start or end side |
footerHeight Deprecated | '64px' | string Set the height of the inner element instead. true |
headerHeight Deprecated | '64px' | string Set the height of the inner element instead. true |
sidebarWidth Deprecated | '256px' | string Set the width of the inner element instead. true |
Root layout documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope