Nav.md

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 HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-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 CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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 globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';

Demos

Default nav

Grouped nav

Expandable nav

Horizontal nav

Horizontal subnav

Horizontal nav with horizontal subnav

Manual nav

Flyout nav

Drilldown nav

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 component with a docked layout, enabled via variant="docked". Control the mobile overlay with isDockExpanded and the desktop label visibility with isDockTextExpanded.

2. Two separate 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 component with variant="docked" and multiple <NavItem> components that must include both icons and text labels. To control text visibility, isTextExpanded={isDockTextExpanded} is passed to the <Nav> component.

4. Button and menu toggle components, which use isDocked and isTextExpanded to toggle between icon-only and text+icon styles. When the nav is docked, and only icons are shown, tooltips 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.