Compass

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 on the PatternFly forum or 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 <CompassPanel> 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.

With docked nav

Content

Content title

Content

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>
  <CompassPanel>
    <CompassMainHeaderContent>
      {Your custom content goes here, which can include the <CompassMainHeaderTitle> and/or <CompassMainHeaderToolbar> sub-components}
    </CompassMainHeaderContent>
  </CompassPanel>
</CompassMainHeader>

Props

Compass

*required
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 layout
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
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

*required
Name	Type	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

*required
Name	Type	Description
childrenrequired	React.ReactNode	Content of the main Compass area. Typically one or more CompassPanel 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

A wrapper component to pass a PatternFly Hero component into.
*required
Name	Type	Default	Description
children	React.ReactNode		Content of the hero
className	string		Additional classes added to the hero

CompassMainHeader

The wrapper component for header content in the main Compass area. When building out a custom implementation, you should ensure any content within the main header is rendered inside a Compass panel and main header content wrappers.
*required
Name	Type	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<CompassPanelProps, 'children'>	Additional props passed to the Compass panel that wraps the main header content when using the title or toolbar props. When using the children prop, you should pass your own Compass 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.

CompassPanel

*required
Name	Type	Description
childrenrequired	React.ReactNode	Content of the panel.
className	string	Additional classes added to the panel.
hasNoBorder	boolean	Indicates the panel should have no border
hasNoPadding	boolean	Indicates the panel should have no padding
isFullHeight	boolean	Indicates the panel should expand to fill the available height
isPill	boolean	Indicates the panel should have a pill border radius
isScrollable	boolean	Indicates the panel should scroll its overflow
isThinking	boolean	Indicates the panel should have a "thinking" animation

CompassMessageBar

*required
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

*required
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--BackgroundImage --pf-v6-c-compass--BackgroundImage--light 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--Padding --pf-t--global--spacer--inset--page-chrome --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass--Gap	1.5rem
--pf-v6-c-compass--Gap --pf-t--global--spacer--inset--page-chrome --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__nav--RowGap	0.5rem
--pf-v6-c-compass__nav--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__nav--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__nav--PaddingInlineEnd	0.5rem
--pf-v6-c-compass__nav--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__nav-main--PaddingInlineStart	1.5rem
--pf-v6-c-compass__nav-main--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__nav-main--PaddingInlineEnd	1.5rem
--pf-v6-c-compass__nav-main--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__sidebar--PaddingBlockStart	0.5rem
--pf-v6-c-compass__sidebar--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__sidebar--PaddingBlockEnd	0.5rem
--pf-v6-c-compass__sidebar--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__sidebar--PaddingInlineStart	0.5rem
--pf-v6-c-compass__sidebar--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__sidebar--PaddingInlineEnd	0.5rem
--pf-v6-c-compass__sidebar--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__main--RowGap	1rem
--pf-v6-c-compass__main--RowGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-compass	--pf-v6-c-compass__main-header-content--RowGap	0.5rem
--pf-v6-c-compass__main-header-content--RowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__main-header-content--ColumnGap	1rem
--pf-v6-c-compass__main-header-content--ColumnGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-compass	--pf-v6-c-compass__main-footer--MarginBlockStart	calc(1rem * -1 + 1.5rem)
--pf-v6-c-compass__main-footer--MarginBlockStart calc(--pf-v6-c-compass__main--RowGap * -1 + --pf-v6-c-compass--Gap) calc(--pf-t--global--spacer--md * -1 + --pf-t--global--spacer--inset--page-chrome) calc(--pf-t--global--spacer--300 * -1 + --pf-t--global--spacer--lg) calc(1rem * -1 + --pf-t--global--spacer--400) calc(1rem * -1 + 1.5rem)
	.pf-v6-c-compass	--pf-v6-c-compass__panel--m-pill--BorderRadius	999px
--pf-v6-c-compass__panel--m-pill--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-compass	--pf-v6-c-compass__panel--PaddingBlockStart	1.5rem
--pf-v6-c-compass__panel--PaddingBlockStart --pf-t--global--spacer--inset--page-chrome --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__panel--PaddingBlockEnd	1.5rem
--pf-v6-c-compass__panel--PaddingBlockEnd --pf-t--global--spacer--inset--page-chrome --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__panel--PaddingInlineStart	1.5rem
--pf-v6-c-compass__panel--PaddingInlineStart --pf-t--global--spacer--inset--page-chrome --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__panel--PaddingInlineEnd	1.5rem
--pf-v6-c-compass__panel--PaddingInlineEnd --pf-t--global--spacer--inset--page-chrome --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-compass__panel--BackgroundColor --pf-t--global--background--color--glass--default --pf-t--global--background--color--glass--default--base --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackdropFilter	none
--pf-v6-c-compass__panel--BackdropFilter --pf-t--global--background--color--glass--filter --pf-t--global--background--color--glass--filter--base none
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BorderColor	(In light theme) #ffffff
--pf-v6-c-compass__panel--BorderColor --pf-t--global--border--color--alt --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BorderRadius	24px
--pf-v6-c-compass__panel--BorderRadius --pf-t--global--border--radius--large --pf-t--global--border--radius--400 24px
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BorderWidth	1px
--pf-v6-c-compass__panel--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BoxShadow	0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
--pf-v6-c-compass__panel--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
	.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--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--section--duration --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-compass	--pf-v6-c-compass--section--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-compass--section--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 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--section--TransitionDuration --pf-v6-c-compass--section--duration, 0s, 0s, 0s, 0s, 0s --pf-t--global--motion--duration--fade--short, 0s, 0s, 0s, 0s, 0s --pf-t--global--motion--duration--sm, 0s, 0s, 0s, 0s, 0s --pf-t--global--duration--100, 0s, 0s, 0s, 0s, 0s 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--section--TransitionDelay 0s, --pf-v6-c-compass--section--duration, --pf-v6-c-compass--section--duration, --pf-v6-c-compass--section--duration, --pf-v6-c-compass--section--duration, --pf-v6-c-compass--section--duration 0s, --pf-t--global--motion--duration--fade--short, --pf-t--global--motion--duration--fade--short, --pf-t--global--motion--duration--fade--short, --pf-t--global--motion--duration--fade--short, --pf-t--global--motion--duration--fade--short 0s, --pf-t--global--motion--duration--sm, --pf-t--global--motion--duration--sm, --pf-t--global--motion--duration--sm, --pf-t--global--motion--duration--sm, --pf-t--global--motion--duration--sm 0s, --pf-t--global--duration--100, --pf-t--global--duration--100, --pf-t--global--duration--100, --pf-t--global--duration--100, --pf-t--global--duration--100 0s, 100ms, 100ms, 100ms, 100ms, 100ms
	.pf-v6-c-compass	--pf-v6-c-compass--section--m-expanded--duration	200ms
--pf-v6-c-compass--section--m-expanded--duration --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-compass	--pf-v6-c-compass--section--m-expanded--TransitionDuration	200ms, 0s, 0s, 0s, 0s, 0s
--pf-v6-c-compass--section--m-expanded--TransitionDuration --pf-v6-c-compass--section--m-expanded--duration, 0s, 0s, 0s, 0s, 0s --pf-t--global--motion--duration--fade--default, 0s, 0s, 0s, 0s, 0s --pf-t--global--motion--duration--md, 0s, 0s, 0s, 0s, 0s --pf-t--global--duration--200, 0s, 0s, 0s, 0s, 0s 200ms, 0s, 0s, 0s, 0s, 0s
	.pf-v6-c-compass	--pf-v6-c-compass--section--m-expanded--TransitionDelay	0s
	.pf-v6-c-compass__panel.pf-m-no-glass	--pf-v6-c-compass__panel--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-compass__panel--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-compass__header.pf-m-expanded	--pf-v6-c-compass--section--TransitionDelay	0s
--pf-v6-c-compass--section--TransitionDelay --pf-v6-c-compass--section--m-expanded--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--section--TransitionDuration --pf-v6-c-compass--section--m-expanded--TransitionDuration --pf-v6-c-compass--section--m-expanded--duration, 0s, 0s, 0s, 0s, 0s --pf-t--global--motion--duration--fade--default, 0s, 0s, 0s, 0s, 0s --pf-t--global--motion--duration--md, 0s, 0s, 0s, 0s, 0s --pf-t--global--duration--200, 0s, 0s, 0s, 0s, 0s 200ms, 0s, 0s, 0s, 0s, 0s
	.pf-v6-c-compass__nav	--pf-v6-c-compass__panel--PaddingBlockStart	0
--pf-v6-c-compass__panel--PaddingBlockStart --pf-v6-c-compass__nav--PaddingBlockStart 0
	.pf-v6-c-compass__nav	--pf-v6-c-compass__panel--PaddingBlockEnd	0
--pf-v6-c-compass__panel--PaddingBlockEnd --pf-v6-c-compass__nav--PaddingBlockEnd 0
	.pf-v6-c-compass__nav	--pf-v6-c-compass__panel--PaddingInlineStart	0.5rem
--pf-v6-c-compass__panel--PaddingInlineStart --pf-v6-c-compass__nav--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass__nav	--pf-v6-c-compass__panel--PaddingInlineEnd	0.5rem
--pf-v6-c-compass__panel--PaddingInlineEnd --pf-v6-c-compass__nav--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass__sidebar	--pf-v6-c-compass__panel--PaddingBlockStart	0.5rem
--pf-v6-c-compass__panel--PaddingBlockStart --pf-v6-c-compass__sidebar--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass__sidebar	--pf-v6-c-compass__panel--PaddingBlockEnd	0.5rem
--pf-v6-c-compass__panel--PaddingBlockEnd --pf-v6-c-compass__sidebar--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass__sidebar	--pf-v6-c-compass__panel--PaddingInlineStart	0.5rem
--pf-v6-c-compass__panel--PaddingInlineStart --pf-v6-c-compass__sidebar--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass__sidebar	--pf-v6-c-compass__panel--PaddingInlineEnd	0.5rem
--pf-v6-c-compass__panel--PaddingInlineEnd --pf-v6-c-compass__sidebar--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem

Edit this page on GitHub