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
SecondaryNavigation

SecondaryNavigation

  • Design
  • Code
  • Props

SecondaryNavigation

Editable Example

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

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

PropDefaultDescriptionValue

className

string
–

The CSS class name to be placed on the wrapping element.

pageWidth

"sm" |"md" |"lg" |"full"
–

Specify the max-width on desktop devices (same as Wrapper component)

id

string
–

Additional id provided to the wrapping element

additional

ReactNode
–

An optional component or element to be rendered in the top right corner of the Secondary navigation. This can be used for adding supplementary content such as buttons, links, or other navigational elements.

BreadcrumbHome

Editable Example

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

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

PropDefaultDescriptionValue

hometext

ReactNode
–

Specify an optional text for the Home Icon

className

string
–

Specify an optional className to be added to the Home Icon

BreadcrumbItem

Editable Example

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

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

PropDefaultDescriptionValue

href

string
–

Specify an link for the BreadcrumbItem

children

React.ReactNode
–

The content to be rendered inside the component. This can be:

  • A string, in which case you must also provide the href prop to define a link
  • An <a> tag, allowing you to pass a fully defined anchor element

Use this prop to specify the elements or text to display within the component

disableLink

boolean
–

Specify BreadcrumbItem to be interactive/enabled or non-interactive/disabled

className

string
–

The CSS class name to be placed on the wrapping element

Breadcrumb

Editable Example

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

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

PropDefaultDescriptionValue

children

React.ReactNode
–

Recommended to use BreadcrumbItem as the direct children for structured navigation.

className

string
–

The CSS class name to be placed on the wrapping element.

On this page

  • SecondaryNavigation
  • BreadcrumbHome
  • BreadcrumbItem
  • Breadcrumb

References

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