Developers
Start building
Themes/Theme SDK/Modules/navigation/Hooks

Hooks

The hooks of @poltura/theme-sdk/navigation.

On this page
import { … } from '@poltura/theme-sdk/navigation';

useMenu

A store menu with the links its categories and pages stand for already filled in.

useMenu(handle: MenuHandle): readonly MenuLink[]

Reads the draft while the merchant edits, in the language of the page.

Parameters

  • handle: MenuHandle: Which store menu to read.

Returns: The menu's top-level links, each with its children.

Example

import { useMenu } from '@poltura/theme-sdk/navigation';

export function FooterLinks() {
  const links = useMenu('footerQuick');
  return (
    <ul>
      {links.map((link) => (
        <li key={link.href}>
          <a href={link.href}>{link.label}</a>
        </li>
      ))}
    </ul>
  );
}

useNavData

The store's category tree and site pages, for menus a theme builds itself.

useNavData(): NavData

Returns: The top-level categories with their subcategories, and the site pages.

Example

import { useNavData } from '@poltura/theme-sdk/navigation';

export function CategoryLinks() {
  const { categories } = useNavData();
  return (
    <nav>
      {categories.map((category) => (
        <a key={category.id} href={category.href}>{category.name}</a>
      ))}
    </nav>
  );
}

useMegaMenu

One menu item's dropdown or mega panel: its open state and the props that give it the menu keyboard model.

useMegaMenu(options?: MegaMenuOptions): MegaMenuState

Opening one panel closes the other panels of the same nav; a click outside, Escape or leaving the menu closes it.

Parameters

  • options?: MegaMenuOptions: How the panel opens, and whether it is held open.

Returns: Whether the panel is open, the actions and the props to spread on the root, trigger and panel.

Example

import { useMegaMenu, type MenuLink } from '@poltura/theme-sdk/navigation';

export function MenuItem({ link }: { link: MenuLink }) {
  const menu = useMegaMenu({ openOn: 'click' });
  return (
    <li {...menu.rootProps}>
      <button type="button" {...menu.triggerProps}>{link.label}</button>
      <div {...menu.panelProps}>
        {link.children.map((child) => (
          <a key={child.href} href={child.href}>{child.label}</a>
        ))}
      </div>
    </li>
  );
}

useNavProducts

The products a navigation panel shows: a category's most popular ones or a hand-picked list.

useNavProducts(by: NavProductsBy, options?: Omit<QueryOptions, 'suspense'>): QueryResult<readonly ProductCard[]>

Parameters

  • by: NavProductsBy: Which products to read.
  • options?: Omit<QueryOptions, 'suspense'>: Whether the read runs, and whether it keeps the previous answer while loading.

Returns: The products as cards, once they load.

Example

import { useNavProducts } from '@poltura/theme-sdk/navigation';

export function Popular({ categoryId }: { categoryId: string }) {
  const { data } = useNavProducts({ categoryId, limit: 3 });
  return (
    <ul>
      {data?.map((product) => (
        <li key={product.id}>{product.title}</li>
      ))}
    </ul>
  );
}
Last updated