import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

## Usage

The BannerNavigation is used on internal applications which are actually listed on the bar only to crosslink between the applications. It is hidden on Mobile devices.

#### Usage with default content

`BannerNavigationWithContent` will contain the default links.

```jsx
import { BannerNavigationWithContent } from '@wfp/ui';

<BannerNavigationWithContent pageWidth="md" />;
```

#### Usage with custom content

`BannerNavigation` allows you to use custom `BannerNavigationItem` components inside.

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

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

#### When to use

BannerNaviagtions are used when the application has multiple pages to be visited by the user. This component allows these different pages to be easily accessible.

#### When not to use

Do not use BannerNavigation when you have only one page.

### Related

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