MainNavigation
The MainNavigation is used across all applications, it is the starting point of the application and offers the top level navigation items.
When to use
- Internal and external applications
- The MainNavigation can be used for both internal and external websites.
When not to use
- External websites (wfp.org, etc.): The header might not be the right solution for external websites. Please consult the #ux-ui channel on Slack.
- Do not use WFP’s logo inside the MainNavigation.
Internal applications
Internal applications are required to use the MainNavigation in combination with the BannerNavigation. The BannerNavigation is used to navigate between the different applications.
External applications
External applications should use the big ribbon logo.
Mobile view
On smartphones, the MainNavigation is collapsed and the user can open it by clicking on the hamburger icon.
TODO: There is also the possiblility to place icon buttons next to the hamburger icon for accessing the most important features of the application.
SubNavigation
The MainNavigation can contain MainNavigationItem’s with a SubNavigation component. The SubNavigation component is used to display additional content.
The maximum number of items is 6 to 8 items depending on the average word length.
The SubNavigation component provides a toggleable part of the MainNavigation. It consists of various subcomponents that allow for the creation of headers, items, links, titles, filters, content areas, lists, and groups.
import {SubNavigation,SubNavigationHeader,SubNavigationTitle,SubNavigationLink,SubNavigationFilter,SubNavigationContent,SubNavigationList,SubNavigationGroup,SubNavigationItem,} from "@wfp/react";() => (<SubNavigation><SubNavigationHeader>SubNav Header</SubNavigationHeader><SubNavigationItem><SubNavigationLink href="http://communities.wfp.org" target="_blank">SubNav Link</SubNavigationLink></SubNavigationItem></SubNavigation>);
Each of these components can accept a className prop to override or add additional classes. They also spread other properties to their root element, allowing you to pass other props like id, style, etc.