Function: useMenu()

useMenu(menuLocation, options): useMenuResponse

Defined in: packages/next/src/data/hooks/useMenu.ts:46

The useMenu hooks. Returns a Menu object.

Important: This hook depends on useAppSettings. If you want to enable SSR;SSG for this hook you will need to fetch app settings on the server side.

Usage

Basic usage

export const Nav = () => {
	const { data, loading, error } = useMenu('primary-menu');

	// handle loading, error states

	return <Menu items={data} css={navStyles} />;
}

Re-fetching client-side on focus and/or mount

If you are fetching app settings on the server, you can enable re-fetching on focus and/or mount to ensure menus are always up-to date even when using SSG/ISR.

export const Nav = () => {
	const { data, loading, error } = useMenu('primary-menu', {
		revalidateOnFocus: true,
		revalidateOnMount: true,
	});

	// handle loading, error states

	return <Menu items={data} css={navStyles} />;
}

Parameters

menuLocation

string

The slug of the menu location you want to fetch

options

FetchHookOptions<FetchResponse<AppEntity>> = {}

SWR configuration options

Returns

useMenuResponse