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:
| |
sidebarPosition | | 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 | |
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> | <aside> | No | Native dom element for the sidebar. |
contentAs | ElementType<any> | <main> | No | Native dom element for the content. |