import { MainNavigation } from "@wfp/react"; () => { return <MainNavigation logo="WFP" />; };
any
The Logo can be either a string or a component
ScreenSize
Specify the max-width on desktop devices (same as Wrapper component)
Wrapper
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.
Specify the max-width on mobile devices (same as Wrapper component)
boolean
A line will be placed above the navigation
"default" |"offShelf"
Show a logo ribbon on the left side of the logo
string
Additional className for the Wrapper
The CSS class name to be placed on the wrapping element.
Defines an id for the component.
id
import {} from "@wfp/react"; () => { return <tm />; };
React.ReactNode
If defined the MainNaviationItem will have a toggleable SubNavigation. See the SubNavigation component for details on usage
MainNaviationItem
SubNavigation
If the subNavigation is open, the subNavigation will be as wide as the content
"fullWidth" |"callout"
Specify the kind of the subNavigation
(action: string,id?: number,e?: any) => void
Specify a callback that will be called when the subNavigation is opened or closed
Specify if you want to use the external version of the component
import {} from "@wfp/react"; () => { return <th />; };
ReactNode
Specify a the content of the SubNavigation