Components
Navigation
MainNavigation

useMainNavigation

The useMainNavigation hook can be used inside the MainNavigation to access and control the state of the Navigation. It allows you to access the context of the MainNavigation which stores the state of the MainNavigation.

Usage

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


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


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

Return value definitions

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

onChangeSub

The action can be toggle or close. i is the ID (number) of the SubMenuItem that should be triggered. Optionally add the native event to prevent its default behaviour.

toggleFirstSubMenuItem = () => {
  onChangeSub("toggle", 0);
};


closeMenu = () => {
  onChangeSub("close");
};

activeMenuItem

Returns the index of the currently active SubMenuItem. Returns null if no SubMenu is opened.

const { activeMenuItem } = useMainNavigation();

toggleMenu

TODO: Rename the function name to toggleMobileMenu, also add true/false optional.

The toggleMenu function allows you to toggle mobile navigation

const toggleMenu = () => {
  setOpenMobileMenu(!openMobileMenu);
};

openMobileMenu

Opens or closes the mobile navigation.

setOpenMobileMenu(true);

On this page

References