docs/extension-test-page
What's New

Root layout

Storybook GitHub

A root layout provides a standardized group of containers to display content at the root level.

Preview

Base Style

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.

Variants and Examples

Header Sticky

Usage

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.

Vue API 

import { DtRootLayout } from '@dialpad/dialtone-vue';

Slots

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.

Props

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

Accessibility

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.

Root layout documentation last updated Thursday, June 18, 2026