@wfp/react/src/components/BannerNavigation/README.mdx

WFP UI Kit

## Types

There are two types of `BannerNavigation` that can be used:

| Type           | React name                    | Description                                                                                                    |
| -------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
| Default        | `BannerNavigationWithContent` | Used exclusively by specific applications which are actually listed on the bar only to crosslink between them. |
| Custom content | `BannerNavigation`            | It allows you to use custom `BannerNavigationItem` components inside.                                          |

## Usage

The default component is used mainly to crosslink among specific WFP applications for **internal use only**. Thus, **the default component does not have to be used for external facing products**. The internal applications are: [WFPgo](https://go.wfp.org), [Self-Service](https://selfservice.go.wf.org), [Communities](https://duckduckgo.com), [Manuals](https://duckduckgo.com), [GoDocs](https://duckduckgo.com), [Data](https://duckduckgo.com), [OPweb](https://duckduckgo.com), [WeLearn](https://duckduckgo.com)

The **custom version** is used when the application has multiple pages to be visited by the user. This component allows these different pages to be easily accessible. Do not use BannerNavigation when you have only one page.

## Usage with React

** Default version **

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

** Custom version **

```jsx
import { BannerNavigation } from '@wfp/react';

<BannerNavigation>
  <BannerNavigationItem>
    <Link href="http://communities.wfp.org" target="_blank">
      Communities
    </Link>
  </BannerNavigationItem>
  <BannerNavigationItem>
    <Search
      banner
      id="search-2"
      labelText="Search"
      placeholder="Search"
      onChange={action('onChange')}
    />
  </BannerNavigationItem>
</BannerNavigation>;
```

## Formatting

** Anatomy **
![Image of BannerNavigation Format](https://github.com/wfp/ui/blob/component-updates/src/assets/formatting/BannerNavigation.png?raw=true)

1. Background
2. Link

## Mobile

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

## Related

[Link](?path=/docs/components-link--link-regular)