id | section | cssPrefix | propComponents | ouia | ||||||
---|---|---|---|---|---|---|---|---|---|---|
Navigation |
components |
pf-v5-c-nav |
|
true |
import './nav.css'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
The following example shows two navigation groups, each with a title
prop passed into the nav group component. To keep nav groups accessible an aria-label
must be passed in if the title
prop is not passed in.
A flyout should be a Menu
component. Press space
or right arrow
to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press escape
or left arrow
to close a flyout.
The NavItem onClick
prop accepts the NavSelectClickHandler
type, which is made up of the following argument and return types:
(
event: React.FormEvent<HTMLInputElement>,
itemId: number | string,
groupId: number | string,
to: string
) => void;