Skip to main content

ContentWithSidebar

A component that renders a main content and a sidebar on the side.

The main content is always rendered before the sidebar in the DOM, so that tab and focus order goes to the main content first.

Example

Props

Name	Type	Default Value	Required	Description
`children`	`[Children, Children]`		Yes	Main content and sidebar to render. The order depends on the sidebar position: "left" -> [sidebar, content] "right" -> [content, sidebar]
`sidebarPosition`	`"left" \| "right"`		Yes	The placement of the sidebar relative to the content. Note that this is purely visual and it does not affect the DOM order: the content always comes first in the DOM, so that it receives focus first when navigating with a keyboard or a screen reader.
`sidebarWidth`	`OptionalResponsiveValue<"content" \| "full" \| "1/2" \| "1/3" \| "2/3" \| "1/4" \| "3/4" \| "1/5" \| "2/5" \| "3/5" \| "4/5"> \| { custom: string \| number; }`		Yes	Width of the sidebar. It can be a shortcut width like with `<Columns>` (e.g. "1/5") or a completely custom width. Examples: `<ContentWithSidebar sidebarPosition="right" sidebarWidth="1/5">...</ContentWithSidebar> <ContentWithSidebar sidebarPosition="right" sidebarWidth={{ custom: "25%" }}>...</ContentWithSidebar>`
`space`	`ConditionalStyle<Values<MapLeafNodes<{ 0: any; 4: any; 8: any; 12: any; 16: any; 24: any; 32: any; 40: any; 80: any; }, CSSVarFunction>, { defaultClass: string; conditions: { wide: string; desktop: string; tablet: string; mobile: string; }; }>>`		No	Horizontal space between the content and the sidebar. Defaults to no space.
`sidebarBackground`	`ConditionalStyle<Values<{ readonly currentColor: "currentColor"; readonly softGrey: CSSVarFunction \| MapLeafNodes<any, CSSVarFunction>; readonly softRed: CSSVarFunction \| MapLeafNodes<...>; ... 74 more ...; readonly brandTertiary: CSSVarFunction \| MapLeafNodes<...>; }, { ...; }>>`		No	Background of the sidebar container, defaults to no background.
`sidebarAs`	`ElementType<any, keyof IntrinsicElements>`	`<aside>`	No	Native dom element for the sidebar.
`contentAs`	`ElementType<any, keyof IntrinsicElements>`	`<main>`	No	Native dom element for the content.

Example