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

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

---
id: Navigation
section: components
---

import { Fragment, useState, useRef, useEffect } from 'react';
import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-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 RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
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

### Default nav

```ts file="./examples/Nav/NavDefault.tsx" isFullscreen

```

### Grouped nav

```ts file="./examples/Nav/NavGrouped.tsx" isFullscreen

```

### Expandable nav

```ts file="./examples/Nav/NavExpandable.tsx" isFullscreen

```

### Horizontal nav

```ts file="./examples/Nav/NavHorizontal.tsx" isFullscreen

```

### Horizontal subnav

```ts file="./examples/Nav/NavWithSubnav.tsx" isFullscreen

```

### Horizontal nav with horizontal subnav

```ts file="./examples/Nav/NavHorizontalWithSubnav.tsx" isFullscreen

```

### Manual nav

```ts file="./examples/Nav/NavManual.tsx" isFullscreen

```

### Flyout nav

```ts file="./examples/Nav/NavFlyout.tsx" isFullscreen

```

### Drilldown nav

```ts isFullscreen file="./examples/Nav/NavDrilldown.tsx"

```

### Docked nav

To save space in the UI, you can use docked navigation to replace text-labeled navigation items with relevant icons. On mobile (or narrow viewports), docked navigation appears as an overlay, while on desktop (or wider viewports) it displays as a persistent vertical sidebar that can toggle between icon-only and text+icon modes.

This demo includes the following features:

1. A [page](/components/page) component with a docked layout, enabled via `variant="docked"`. Control the expanded state of the dock with `isDockExpanded` and the set whether the dock is an overlay with `isDockOverlay`. The expanded docked nav is automatically an overlay in mobile.

2. Two separate [masthead](/components/masthead) components:
   - **Horizontal mobile masthead**: Shown on small viewports using `display={{ default: 'inline' }}`, with a hamburger menu toggle button, brand logo, and action buttons that should be immediately visible to users.
   - **Vertical docked masthead**: Uses `variant="docked"` to create a thinner navigation sidebar with a hamburger menu toggle button, nav items, and action buttons.

3. A [navigation](/components/navigation) component with `variant="docked"` and multiple `<NavItem>` components that must include both icons and text labels. To control text visibility, `isExpanded={isDockExpanded}` is passed to the `<Nav>` component.

4. [Button](/components/button) and [menu toggle](/components/menus/menu-toggle) components, which use `isDocked` and `isExpanded` to toggle between icon-only and text+icon styles. When the nav is docked, and only icons are shown, [tooltips](/components/tooltip) must provide full text labels for the navigation items, buttons, and menu toggles.

5. A `<MastheadLogo>` component that uses `isCompact` to show an icon-only logo when the dock is collapsed, and a full logo with text when expanded.

**Note**: For better keyboard accessibility, ensure that focus shifts between the hamburger menu toggle button in the mobile masthead and the docked overlay menu toggle button as the navigation is opened and closed.

```ts file="./examples/Nav/NavDockedNav.tsx" isFullscreen isBeta

```