Root layout

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

Content

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

Slots

Name	Description
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	Description	Default
bodyClass	Additional class name for the body Type: string\|array\|object	''
contentClass	Additional class name for the content element Type: string\|array\|object	''
fixed	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. Type: boolean Values: truefalse	true
footerClass	Additional class name for the footer element Type: string\|array\|object	''
footerHeight	DEPRECATED: set the height of the inner element instead. Type: string	'64px'
headerClass	Additional class name for the header element Type: string\|array\|object	''
headerHeight	DEPRECATED: set the height of the inner element instead. Type: string	'64px'
headerSticky	Scroll the header with the page Type: boolean Values: truefalse	false
responsiveBreakpoint	Defines the breakpoint when the root layout will change to responsive version Type: string Values: 'sm''md''lg'null	null
sidebarClass	Additional class name for the sidebar element Type: string\|array\|object	''
sidebarPosition	Whether the sidebar is on the left or right side Possible options: 'left', 'right' Type: string Values: leftright	'left'
sidebarWidth	DEPRECATED: set the width of the inner element instead. Type: string	'256px'

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.

Preview

Base Style #

Variants and Examples #

Header Sticky #

Usage #

Vue API #

Slots

Props

Accessibility #

Base Style

Variants and Examples

Header Sticky

Usage

Vue API

Accessibility