MainNavigation

Import statement

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

Usage

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>;

Logo

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

import { MainNavigation } from "@wfp/react";
<MainNavigation logo>
  {/* 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.

<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 subnavigation.
• SubNavigationHeader: Use this component to set a header for your subnavigation.
• SubNavigationTitle: This component sets a title for your subnavigation.
• SubNavigationLink: This component creates links within the subnavigation. They can be used similar to the traditional anchor links.
• SubNavigationFilter: This is used to integrate a filter mechanism within your subnavigation.
• SubNavigationContent: This is a wrapper for the content that should be displayed within the subnavigation.
• SubNavigationList: This component wraps a list of items or links within the subnavigation.
• 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 subnavigation elements.
• SubNavigationItem: These are individual items within the 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.

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 subcomponents 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.

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 child components of 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 JavaScript

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