MainNavigation

The MainNavigation is used across all applications, it is the starting point of the application and offers the top level navigation items.

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 sub-components 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.

Figma