Components
Navigation
BannerNavigation

BannerNavigation

Import statement

import { BannerNavigation, BannerNavigationWithContent, BannerNavigationItem, Link } from "@wfp/react"

There are two variants of BannerNavigation that can be used:

BannerNavigationWithContent

Used exclusively by specific applications which are actually listed on the bar to crosslink between them.

Editable Example

import { BannerNavigationWithContent } from "@wfp/react";
<BannerNavigationWithContent pageWidth="lg" />;

BannerNavigation

It allows you to use custom BannerNavigationItem components inside.

Expand code

Editable Example

import {
  BannerNavigation,
  BannerNavigationItem,
  Link,
} from "@wfp/react";

<BannerNavigation>
  <BannerNavigationItem>
    <Link href="http://wfp.org" target="_blank">
      wfp.org
    </Link>
  </BannerNavigationItem>
  <BannerNavigationItem>
    <Link
      href="http://communities.wfp.org"
      target="_blank"
    >
      Communities
    </Link>
  </BannerNavigationItem>
  <BannerNavigationItem>
    <Link href="http://go.wfp.org" target="_blank">
      Another link
    </Link>
  </BannerNavigationItem>
</BannerNavigation>;

Mobile

The component is hidden when the viewport size is less than 768px.

Related

Link

On this page

References