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<{ 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. | |
sidebarBackground | ConditionalStyle<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. | |
sidebarAs | ElementType<any> | <aside> | No | Native dom element for the sidebar. |
contentAs | ElementType<any> | <main> | No | Native dom element for the content. |