MainNavigation

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

() => {
  return <MainNavigation logo="WFP" />;
};

Prop	Default	Description	Value
logo `any`	–	The Logo can be either a string or a component
pageWidth `ScreenSize`	–	Specify the max-width on desktop devices (same as `Wrapper` component)
components `WrapperMobileButton`	–	The replaceable components to be used for the main navigation. MobileButton(prefix, toggleMenu): accepts a React.ReactNode which will be used as the mobile button. Wrapper: accepts a React.ReactNode which will be used as the wrapper.
mobilePageWidth `ScreenSize`	–	Specify the max-width on mobile devices (same as `Wrapper` component)
line `boolean`	false	A line will be placed above the navigation default: false	line
logoRibbon `"default" \|"offShelf"`	default	Show a logo ribbon on the left side of the logo default: default
wrapperClassName `string`	–	Additional className for the `Wrapper`
className `string`	–	The CSS class name to be placed on the wrapping element.
id `string`	–	Defines an `id` for the component.

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

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

Prop	Default	Description	Value
subNavigation `React.ReactNode`	–	If defined the `MainNaviationItem` will have a toggleable SubNavigation. See the `SubNavigation` component for details on usage
subNavWideAsContent `boolean`	–	If the subNavigation is open, the subNavigation will be as wide as the content	subNavWideAsContent
kind `"fullWidth" \|"callout"`	–	Specify the kind of the subNavigation
onChangeSub `(action: string,id?: number,e?: any) => void`	–	Specify a callback that will be called when the subNavigation is opened or closed
external `boolean`	–	Specify if you want to use the external version of the component	external

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

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

Prop	Default	Description	Value
children `ReactNode`	–	Specify a the content of the SubNavigation