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

BannerNavigation

  • Design
  • Code
  • Props

The Banner navigation is an optional menu at the top of every WFP page. It may contains external navigation links or links not directly connected with the main navigation structure.

Example

Figma image

Anatomy

Figma image

Banner navigation layout follows the Main Navigation grid (Fixed VS Flexible)

The component should be used by the specific applications which are actually listed on the bar to crosslink between them.

The internal applications are:

  • WFPgo
  • Communities
  • Manuals
  • GoDocs
  • WeLearn
  • Dashboard
  • OPweb
  • Self-Service
  • UN Booking Hub
  • WFP.org

The links can be customized to fit the specific needs of the application.

When to use

  • Show only links needed for the specific product

When not to use

  • Don’t insert links present in the main navigation
  • Don’t use with less than 3 links

On this page

  • Example
  • Anatomy

References

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