@patternfly/react-core/src/demos/Compass/Compass.md

This library provides a set of common React components for use with the PatternFly reference implementation.

---
id: Compass
section: components
---

import { useRef, useState, useEffect } from 'react';
import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
import RhUiAddSquareIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-square-icon';
import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon';
import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
import imgAvatar from '../assets/avatarImg.svg';
import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
import pfLogo from '../assets/PF-IconLogo-color.svg';
import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
import RhUiResourceIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resource-icon';

## Demos

### Compass layout

This demo showcases an implementation of the following Compass features:

- Middle navigation in the `header`, featuring top-level primary tabs and a secondary container for sub-tabs.
- Vertical sidebars utilizing `<ActionList>` groups with buttons that use the `isCircle` prop.
- A custom gradient background in the `<Hero>`, visible in dark mode.
- Background images that automatically adapt to both light and dark modes.
- A `footer` section containing the `<CompassMessageBar>`, that could be used for AI text input.

```ts isFullscreen file="./examples/CompassDemo.tsx"

```

### Docked nav demo

```ts isFullscreen isBeta file="./examples/CompassDockDemo.tsx"

```