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

NameTypeDefault ValueRequiredDescription
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.

sidebarWidthOptionalResponsiveValue<"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>
spaceConditionalStyle<Values<{ readonly 0: 0; readonly 4: 4; readonly 8: 8; readonly 12: 12; readonly 16: 16; readonly 24: 24; readonly 32: 32; readonly 40: 40; readonly 80: 80; readonly 120: 120; readonly 160: 160; }, { defaultClass: string; conditions: { ...; }; }>>No

Horizontal space between the content and the sidebar. Defaults to no space.

sidebarBackgroundConditionalStyle<Values<{ readonly currentColor: "currentColor"; readonly pastelGrey: CSSVarFunction | MapLeafNodes<any, CSSVarFunction>; readonly pastelRed: CSSVarFunction | MapLeafNodes<...>; ... 94 more ...; readonly brandTertiary: CSSVarFunction | MapLeafNodes<...>; }, { ...; }>>No

Background of the sidebar container, defaults to no background.

sidebarAsElementType<any><aside>No

Native dom element for the sidebar.

contentAsElementType<any><main>No

Native dom element for the content.