BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Actions
      • Overview
      • Button
      • ContextMenu
      • Link
    • Controls
      • Overview
      • Checkbox
      • Tag
      • Toggle
    • Forms
      • Overview
      • DatePicker
      • FileUploader
      • Input
      • NumberInput
      • RadioButton
      • Search
      • Select
      • Slider
      • TextArea
      • TextInput
    • Hooks
      • useIsomorphicLayoutEffect
      • useMediaQuery
      • useSettings
    • Navigation
      • Overview
      • AnchorNavigation
      • BannerNavigation
      • Breadcrumb
      • Footer
      • InfoBar
      • MainNavigation
      • SecondaryNavigation
      • StepNavigation
      • SubNavigation
    • Overlay
      • Overview
      • Credits
      • Modal
      • ModalWrapper
      • Notification
      • Tooltip
    • Structure
      • Overview
      • Accordion
      • AuthLayout
      • Avatar
      • Callout
      • Card
      • ContentSwitcher
      • Empty
      • Hero
      • InlineLoading
      • Item
      • List
      • Loading
      • mdxComponents
      • Module
      • Pagination
      • ReadMore
      • Story
      • Table
      • Tabs
      • Text
      • Unit
      • User
      • WFPCoreProvider
      • Wrapper
Components
Navigation
StepNavigation

StepNavigation

  • Design
  • Code
  • Props

StepNavigation

Editable Example

import { StepNavigation } from "@wfp/react";

() => {
  return <StepNavigation selectedStep={1} />;
};

PropDefaultDescriptionValue

children

React.ReactNode
–

Provide the contents of your StepNavigation

className

string
–

Provide a className that is applied to the root nav component for the StepNavigationProps

vertical

boolean
–

Specify whether the StepNavigation will be displayed vertically

role

string
–

By default, this value is "navigation". You can also provide an alternate role if it makes sense from the accessibility-side

selectedStep

number
–

Optionally provide an index for the currently selected step

StepNavigationItem

Editable Example

import { StepNavigationItem } from "@wfp/react";

() => {
  return <StepNavigationItem />;
};

PropDefaultDescriptionValue

className

string
–

Provide a className that is applied to the StepNavigation component

helperText

ReactNode
–

Provide text that is used alongside the control label for additional help

index

number
–

Provide the index of the each item

label

string
–

Provide the text that will be read by a screen reader when visiting this control

role

string
–

By default, this value is "presentation". You can also provide an alternate role if it makes sense from the accessibility-side

selectedStep

number
0

Optionally provide an index for the currently selected step

default: 0

page

number
0

The page number of the step.

default: 0

status

StatusType
–

Provide status one of "warning" | "error" | "in-progress" status prop type to your step to give more meaning.

renderAnchor

(p: object) => {}
–

An optional parameter to allow overriding the anchor rendering. Useful for using Tab along with react-router or other client side router libraries.

onClick

(e: object) => {}
() => {}

On click handler to change the currently active item.

default: () => {}

handleTabClick

(e?: any,index?: number,label?: string) => {}
() => {}
default: () => {}

On this page

  • StepNavigation
  • StepNavigationItem

References

  • Storybook
Storybook
Figma library
Contact us
2025 © World Food Programme