🚧 This website is work in progress 👷
Components
Navigation
MainNavigation

MainNavigation

Import statement

import { MainNavigation, MainNavigationItem, SubNavigation, SubNavigationHeader, SubNavigationTitle, SubNavigationLink, SubNavigationFilter, SubNavigationContent, SubNavigationList, SubNavigationGroup, SubNavigationItem } from "@wfp/react"

Usage

Expand code

Editable Example

import {
  MainNavigation,
  MainNavigationItem,
  Link,
} from "@wfp/react";

<MainNavigation>
  <MainNavigationItem>
    <Link
      href="https://go.docs.wfp.org"
      target="_blank"
    >
      Section 3
    </Link>
  </MainNavigationItem>
  <MainNavigationItem>
    <Link href="http://opweb.wfp.org" target="_blank">
      Section 4
    </Link>
  </MainNavigationItem>
</MainNavigation>;

Display the logo by adding the showLogo prop to the MainNavigation component.

Editable Example

import { MainNavigation } from "@wfp/react";
<MainNavigation showLogo>
  {/* Content of the MainNavigation */}
</MainNavigation>;

The MainNavigation can be used with a custom logo. The logo can be passed as a ReactNode to the logo prop.

<MainNavigation logo={<img src={logo} alt="Logo" />}>
  {/* Content of the MainNavigation */}
</MainNavigation>

Mobile Navigation

The MainNavigation can be used as a mobile navigation. It is automatically displayed when the screen size is smaller than md.

Expand code

Editable Example

<MainNavigation showLogo logo="Product name">
  <MainNavigationItem>
    <Link
      href="https://go.docs.wfp.org"
      target="_blank"
    >
      Section 3
    </Link>
  </MainNavigationItem>
  <MainNavigationItem>
    <Link href="http://opweb.wfp.org" target="_blank">
      Section 4
    </Link>
  </MainNavigationItem>
</MainNavigation>;

Components:

  • SubNavigation: This is the main wrapper for the sub-navigation.
  • SubNavigationHeader: Use this component to set a header for your sub-navigation.
  • SubNavigationTitle: This component sets a title for your sub-navigation.
  • SubNavigationLink: This component creates links within the sub-navigation. They can be used similar to the traditional anchor links.
  • SubNavigationFilter: This is used to integrate a filter mechanism within your sub-navigation.
  • SubNavigationContent: This is a wrapper for the content that should be displayed within the sub-navigation.
  • SubNavigationList: This component wraps a list of items or links within the sub-navigation.
  • SubNavigationGroup: This allows you to group multiple items or links under a single heading. The group can have a title and is ideal for categorizing sub-navigation elements.
  • SubNavigationItem: These are individual items within the sub-navigation.

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.

MainNavigationItem

The MainNavigationItem are the main components of the MainNavigation. It can be used to create a link to a page or to open a SubNavigation.

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


() => (
  <MainNavigation>
    {/* ...otherComponents */}
    <MainNavigationItem>
      <Link href="http://communities.wfp.org" target="_blank">
        Section 1
      </Link>
    </MainNavigationItem>
  </MainNavigation>
);

MainNavigationItem is using SubNavigation as a prop

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.

// TODO: Add imports directly from Test


<MainNavigationItem
  subNavigation={<SubNavigation>{/* Content here*/}</SubNavigation>}
>
  Title
</MainNavigationItem>
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>
);

MainNavigation with BannerNavigation

The MainNavigation can be used with a BannerNavigation to create a navigation with a banner on top.

Expand code

Editable Example

import {
  BannerNavigation,
  MainNavigation,
  MainNavigationItem,
} from "@wfp/react";

() => (
  <>
    <BannerNavigation>
      <BannerNavigationItem>
        <Link
          href="http://communities.wfp.org"
          target="_blank"
        >
          Communities
        </Link>
      </BannerNavigationItem>
    </BannerNavigation>
    <MainNavigation>
      <MainNavigationItem>
        <Link
          href="http://communities.wfp.org"
          target="_blank"
        >
          Section 1
        </Link>
      </MainNavigationItem>
    </MainNavigation>
  </>
);

Building a SubNavigation

import {
  SubNavigation,
  SubNavigationHeader,
  SubNavigationTitle,
  SubNavigationFilter,
  SubNavigationContent,
  SubNavigationList,
  SubNavigationGroup,
  SubNavigationItem,
} from "@wfp/react";

SubNavigation for the User

An User MainNavigationItem consists out of the User component and a SubNavigation.

<MainNavigationItem
  className="wfp--main-navigation__user"
  subNavigation={
    <SubNavigation>
      <SubNavigationHeader>
        <SubNavigationTitle>Welcome Max!</SubNavigationTitle>
        <SubNavigationLink>
          <Button secondary small>
            Logout
          </Button>
        </SubNavigationLink>
      </SubNavigationHeader>
      <SubNavigationContent>{/* Additional content */}</SubNavigationContent>
    </SubNavigation>
  }
>
  <User ellipsis title="Max Mustermann" />
</MainNavigationItem>

useMainNavigation() hook

The useMainNavigation hook can be used inside the MainNavigation to access and control the state of the Navigation.

Usage

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


function ComponentInsideMainNavigation() {
  const { onChangeSub, activeMenuItem, openMobileMenu, toggleMenu } =
    useMainNavigation();


  return <Button onClick={() => toggleMenu()}>Toggle Menu</Button>;
}

Definition

export interface MainNavigationContextType {
  /**
   * Callback when the user clicks on a sub menu item
   */
  onChangeSub: (action: string, i?: string, e?: any) => void;
  /**
   * The active menu item
   */
  activeMenuItem?: string | null;
  /**
   * Whether the mobile menu is open
   */
  openMobileMenu: boolean;
  /**
   * Toggle the mobile menu
   */
  toggleMenu: () => void;
}

Usage with vanilla Java-Script

Using the MainNavigation in applications not using react.js requires a custom implementation. An example can be found at Codesandbox.

Source code of vanilla.js implementation on GitHub

On this page

References