Info alert:Beta feature
This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.
Examples
Basic
In a basic Compass layout, content can be passed to the following props to populate different areas of the page:
header: Content rendered at the top of the page, typically including a<CompassHeader>component that divides the header into 3 areas, with a logo or brand, middle navigation, and profile.sidebarStart: Content rendered at the horizontal start of the page (by default, the left side).main: Content rendered in the center of the page, typically including a<CompassMainHeader>or<CompassHero>, along with a<CompassContent>filled with 1 or more<Panel>components.sidebarEnd: Content rendered at the horizontal end of the page (by default, the right side).footer: Content rendered at the bottom of the page.
To customize the background image of the <Compass> and <CompassHero> components, you can use their respective backgroundSrcLight and backgroundSrcDark props. You can also add and customize a color gradient background for the <CompassHero> component by using the gradientLight and gradientDark props.
Hero
Content title
Content
With alternate footer
When footer is used, its content will fill the width of the screen. By default, when content inside the footer grows, the height and placement of the start and end sidebars will adjust to allow for the change. To modify this behavior and render footer content without interfering with the sidebars, instead place a <CompassMainFooter> inside the main section. This will render content at the bottom of the page between the 2 sidebars, rather than across the entire bottom of the page.
Composable structure
When building a more custom implementation with Compass components, there are some intended or expected structures that must remain present.
CompassMainHeader structure
When using the children property in the <CompassMainHeader> component, there are specific structural patterns that you should follow, as shown this general code structure.
<CompassMainHeader>
<Panel>
<PanelMain>
<PanelMainBody>
<CompassMainHeaderContent>
{Your custom content goes here, which can include the <CompassMainHeaderTitle> and/or <CompassMainHeaderToolbar> sub-components}
</CompassMainHeaderContent>
</PanelMainBody>
</PanelMain>
</Panel>
</CompassMainHeader>Props
Compass
| Name | Type | Default | Description |
|---|---|---|---|
| backgroundSrcDark | string | Dark theme background image path of the Compass | |
| backgroundSrcLight | string | Light theme background image path of the Compass | |
| className | string | Additional classes added to the Compass. | |
| dock | React.ReactNode | Content of the docked navigation area of the layout | |
| drawerContent | React.ReactNode | Content rendered in an optional drawer wrapping the layout | |
| drawerProps | DrawerProps | Additional props passed to the drawer | |
| footer | React.ReactNode | Content placed at the bottom of the layout | |
| header | React.ReactNode | Content placed at the top of the compass layout | |
| isDockExpanded Beta | boolean | Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. | |
| isDockTextExpanded Beta | boolean | Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and will handle toggling the visibility of the text in individual isDocked components. | |
| isFooterExpanded | boolean | true | Flag indicating if the footer is expanded |
| isHeaderExpanded | boolean | true | Flag indicating if the header is expanded |
| isSidebarEndExpanded | boolean | true | Flag indicating if the end sidebar is expanded |
| isSidebarStartExpanded | boolean | true | Flag indicating if the start sidebar is expanded |
| main | React.ReactNode | Content placed at the center of the layout | |
| masthead | React.ReactNode | The horizontal masthead content (e.g. <Masthead />). This masthead will only render when dock content is passed and only at mobile viewports. | |
| sidebarEnd | React.ReactNode | Content placed at the horizontal end of the layout, after the main content | |
| sidebarStart | React.ReactNode | Content placed at the horizontal start of the layout, before the main content |
CompassHeader
| Name | Type | Default | Description |
|---|---|---|---|
| logo | React.ReactNode | Content of the logo area | |
| nav | React.ReactNode | Content of the navigation area | |
| profile | React.ReactNode | Content of the profile area |
CompassContent
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content of the main Compass area. Typically one or more `Panel` components. | |
| className | string | Additional classes added to the CompassContent | |
| drawerContent | React.ReactNode | Content rendered in an optional drawer wrapping the CompassContent | |
| drawerProps | DrawerProps | Additional props passed to the drawer |
CompassHero
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content of the hero | |
| className | string | Additional classes added to the hero |
CompassMainHeader
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Custom main header content. To opt into a default styling, use the title and toolbar props instead. | |
| className | string | Additional classes added to the main header | |
| compassPanelProps | Omit<PanelProps, 'children'> | Additional props passed to the Panel that wraps the main header content when using the title or toolbar props. When using the children prop, you should pass your own Panel. | |
| title | React.ReactNode | Styled title. If title or toolbar is provided, the children will be ignored. | |
| toolbar | React.ReactNode | Styled toolbar. If title or toolbar is provided, the children will be ignored. |
CompassMessageBar
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content of the message bar. Typically a @patternfly/chatbot MessageBar component. | |
| className | string | Additional classes added to the message bar |
CompassMainFooter
| Name | Type | Default | Description |
|---|---|---|---|
| isExpanded | No type info | true |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-compass | --pf-v6-c-compass--BackgroundImage | none | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--BackgroundImage--light | none | ||
| .pf-v6-c-compass | --pf-v6-c-compass--BackgroundImage--dark | none | ||
| .pf-v6-c-compass | --pf-v6-c-compass--Padding | 1.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--Gap | 1.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__nav--RowGap | 0.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__nav--PaddingBlockStart | 0 | ||
| .pf-v6-c-compass | --pf-v6-c-compass__nav--PaddingBlockEnd | 0 | ||
| .pf-v6-c-compass | --pf-v6-c-compass__nav--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__nav--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__nav-main--PaddingInlineStart | 1.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__nav-main--PaddingInlineEnd | 1.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__sidebar--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__sidebar--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__sidebar--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__sidebar--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__main--RowGap | 1rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__main-header-content--RowGap | 0.5rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__main-header-content--ColumnGap | 1rem | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__main-footer--MarginBlockStart | calc(1rem * -1 + 1.5rem) | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__message-bar--Width | 450px | ||
| .pf-v6-c-compass | --pf-v6-c-compass__message-bar--MinWidth | 300px | ||
| .pf-v6-c-compass | --pf-v6-c-compass__message-bar--MaxWidth | 600px | ||
| .pf-v6-c-compass | --pf-v6-c-compass--m-docked__masthead--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--section--slide--length--header | 100% | ||
| .pf-v6-c-compass | --pf-v6-c-compass--section--slide--length--sidebar | 100% | ||
| .pf-v6-c-compass | --pf-v6-c-compass--section--slide--length--main-footer | 100% | ||
| .pf-v6-c-compass | --pf-v6-c-compass--section--slide--length--footer | 100% | ||
| .pf-v6-c-compass | --pf-v6-c-compass--section--duration | 100ms | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--section--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--section--TransitionDuration | 100ms, 0s, 0s, 0s, 0s, 0s | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--section--TransitionProperty | opacity, visibility, translate, height, width, margin | ||
| .pf-v6-c-compass | --pf-v6-c-compass--section--TransitionDelay | 0s, 100ms, 100ms, 100ms, 100ms, 100ms | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--section--m-expanded--duration | 200ms | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--section--m-expanded--TransitionDuration | 200ms, 0s, 0s, 0s, 0s, 0s | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass--section--m-expanded--TransitionDelay | 0s | ||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--Width | 15.625rem | ||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--desktop--Width | auto | ||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--ZIndex | 300 | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--TransitionDuration--slide | 0s | ||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide | 0s | ||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--TransitionTimingFunction--slide | cubic-bezier(0, 0, .2, 1) | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock-main--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock-main--desktop--BackgroundColor | initial, #ffffff | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock-main--BoxShadow | none | ||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow | 4px
0px
6px
-4px
rgba(41, 41, 41, 0.2000) | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock-main--desktop--BoxShadow | 0px
4px
10px
0px
rgba(41, 41, 41, 0.1500), none | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock-main--BackdropFilter | initial, revert | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock-main--BorderInlineEndWidth | initial, 0 | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock-main--BorderInlineEndColor | transparent | ||
| .pf-v6-c-compass | --pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor | initial, transparent | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth | initial, 1px | ||
| ||||
| .pf-v6-c-compass | --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor | initial, #e0e0e0 | ||
| ||||
| .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead | --pf-v6-c-masthead--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) | --pf-v6-c-button--hamburger-icon--top--path | path("M5,1 L9,1") | ||
| ||||
| .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) | --pf-v6-c-button--hamburger-icon--arrow--path | path("M3,7 L1,5 L3,3") | ||
| ||||
| .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) | --pf-v6-c-button--hamburger-icon--bottom--path | path("M9,9 L5,9") | ||
| ||||
| .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) | --pf-v6-c-button__icon--TransitionDelay | 0s | ||
| .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) | --pf-v6-c-button__icon--ScaleX | -1 | ||
| ||||
| .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) | --pf-v6-c-button--hover__icon--TransitionDelay | 0s | ||
| .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) | --pf-v6-c-button--hover__icon--ScaleX | -1 | ||
| ||||
| .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) | --pf-v6-c-button--hamburger-icon--top--path | path("M5,1 L9,1") | ||
| ||||
| .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) | --pf-v6-c-button--hamburger-icon--arrow--path | path("M3,7 L1,5 L3,3") | ||
| ||||
| .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) | --pf-v6-c-button--hamburger-icon--bottom--path | path("M9,9 L5,9") | ||
| ||||
| .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) | --pf-v6-c-button__icon--TransitionDelay | 0s | ||
| .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) | --pf-v6-c-button__icon--ScaleX | 1 | ||
| ||||
| .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) | --pf-v6-c-button--hover__icon--TransitionDelay | 0s | ||
| .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) | --pf-v6-c-button--hover__icon--ScaleX | 1 | ||
| ||||
| .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger | --pf-v6-c-button--hamburger-icon--top--path | path("M5,1 L9,1") | ||
| ||||
| .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger | --pf-v6-c-button--hamburger-icon--arrow--path | path("M3,7 L1,5 L3,3") | ||
| ||||
| .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger | --pf-v6-c-button--hamburger-icon--bottom--path | path("M9,9 L5,9") | ||
| ||||
| .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger | --pf-v6-c-button__icon--TransitionDelay | 0s | ||
| .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger | --pf-v6-c-button__icon--ScaleX | 1 | ||
| ||||
| .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger | --pf-v6-c-button--hover__icon--TransitionDelay | 0s | ||
| .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger | --pf-v6-c-button--hover__icon--ScaleX | 1 | ||
| ||||
| .pf-v6-c-compass__header.pf-m-expanded | --pf-v6-c-compass--section--TransitionDelay | 0s | ||
| ||||
| .pf-v6-c-compass__header.pf-m-expanded | --pf-v6-c-compass--section--TransitionDuration | 200ms, 0s, 0s, 0s, 0s, 0s | ||
| ||||
| .pf-v6-c-compass__nav .pf-v6-c-panel | --pf-v6-c-panel__main-body--PaddingBlockStart | 0 | ||
| ||||
| .pf-v6-c-compass__nav .pf-v6-c-panel | --pf-v6-c-panel__main-body--PaddingBlockEnd | 0 | ||
| ||||
| .pf-v6-c-compass__nav .pf-v6-c-panel | --pf-v6-c-panel__main-body--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-compass__nav .pf-v6-c-panel | --pf-v6-c-panel__main-body--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-compass__sidebar .pf-v6-c-panel | --pf-v6-c-panel__main-body--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-compass__sidebar .pf-v6-c-panel | --pf-v6-c-panel__main-body--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-compass__sidebar .pf-v6-c-panel | --pf-v6-c-panel__main-body--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-compass__sidebar .pf-v6-c-panel | --pf-v6-c-panel__main-body--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-compass__dock.pf-m-expanded | --pf-v6-c-compass__dock--TransitionDuration--slide | 0s | ||
| ||||