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 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, the page structure is defined by the order of elements nested within the main .pf-v6-c-compass container:

Header: Content rendered at the top of the page (.pf-v6-c-compass__header), typically containing a logo (.pf-v6-c-compass__logo), middle navigation (.pf-v6-c-compass__nav), and profile (.pf-v6-c-compass__profile).
Start sidebar: Content rendered at the horizontal start of the page (by default, the left side). In this example, a .pf-v6-c-compass__sidebar with the .pf-m-start modifier.
Main: Content rendered in the center of the page. The .pf-v6-c-compass__main wrapper contains a hero component, the main header (.pf-v6-c-compass__main-header), the content area (.pf-v6-c-compass__content), and the main footer (.pf-v6-c-compass__main-footer) with the message bar.
End sidebar: Content rendered at the horizontal end of the page (by default, the right side). In this example, a .pf-v6-c-compass__sidebar with the .pf-m-end modifier.
Footer: Content rendered at the bottom of the page (.pf-v6-c-compass__footer).

hero

main header

content

message bar

Docked

dock

main header

content

Documentation

Usage

Class	Applied to	Outcome
`.pf-v6-c-compass`	`<div>`	Initiates the Compass component. Required
`.pf-v6-c-compass__header`	`<div>`	Initiates the Compass header. Required
`.pf-v6-c-compass__logo`	`<div>`	Initiates the Compass logo header.
`.pf-v6-c-compass__dock`	`<div>`	Initiates the Compass dock.
`.pf-v6-c-compass__dock-main`	`<div>`	Initiates the Compass dock main wrapper.
`.pf-v6-c-compass__profile`	`<div>`	Initiates the Compass profile.
`.pf-v6-c-compass__sidebar`	`<div>`	Initiates a Compass sidebar. Required
`.pf-v6-c-compass__main`	`<div>`	Initiates the Compass main wrapper. Required
`.pf-v6-c-compass__main-header`	`<div>`	Initiates the Compass main header.
`.pf-v6-c-compass__main-header-content`	`<div>`	Initiates the Compass main header content. This should be passed into a glass panel component.
`.pf-v6-c-compass__main-header-title`	`<div>`	Initiates a title within the Compass main header content.
`.pf-v6-c-compass__main-header-toolbar`	`<div>`	Initiates a toolbar of actions within the Compass main header content.
`.pf-v6-c-compass__content`	`<div>`	Initiates the Compass content. Required
`.pf-v6-c-compass__main-footer`	`<div>`	Initiates the Compass main footer. Required
`.pf-v6-c-compass__nav`	`<div>`	Initiates a Compass container for site navigation.
`.pf-v6-c-compass__nav-content`	`<div>`	Initiates a Compass container for navigation content.
`.pf-v6-c-compass__nav-home`	`<div>`	Initiates a container for Compass home button.
`.pf-v6-c-compass__nav-main`	`<div>`	Initiates a container for Compass navigation main content.
`.pf-v6-c-compass__nav-search`	`<div>`	Initiates a container for Compass search button.
`.pf-v6-c-compass__footer`	`<div>`	Initiates the Compass footer.
`.pf-v6-c-compass__message-bar`	`<div>`	Initiates the Compass message bar.
`.pf-m-docked`	`.pf-v6-c-compass`	Modifies for dock layout.
`.pf-m-no-screen-warning`	`.pf-v6-c-compass`	Disables the screen warning that shows on smaller viewports.
`.pf-m-start`	`.pf-v6-c-compass__sidebar`	Modifies a Compass sidebar for start styles. Required
`.pf-m-end`	`.pf-v6-c-compass__sidebar`	Modifies a Compass sidebar for end styles. Required
`.pf-m-expanded`	`.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer`	Modifies a Compass section for expanded styles.

CSS variables

Expand or collapse column	Selector	Variable	Value

Edit this page on GitHub