ArdoLayout

On this page

Layout component with explicit slot props.

import { ArdoLayout } from "ardo/ui"

<ArdoLayout>{children}</ArdoLayout>

Props

Name	Type	Required	Description
`header`	`ReactNode`	No	Header content
`sidebar`	`ReactNode`	No	Sidebar content
`footer`	`ReactNode`	No	Footer content
`children`	`ReactNode`	Yes	Main content
`bare`	`boolean`	No	Render a plain main element with document scrolling for bare routes.
`scrollMode`	`ArdoScrollMode`	No	Use the document as the scroll container instead of the viewport shell.
`showSkipLink`	`boolean`	No	Render the built-in skip link. Disable when the host owns navigation chrome.
`className`	`string`	No	Additional CSS classes

Props type: ArdoLayoutProps

Example

<ArdoLayout
  header={<ArdoHeader logo="/logo.svg" title="Ardo" />}
  sidebar={<ArdoSidebar />}
  footer={<ArdoFooter message="MIT License" />}
>
  <ArdoOutlet />
</ArdoLayout>