# Hooks (/themes/sdk/reference/navigation/hooks)

```ts
import { … } from '@poltura/theme-sdk/navigation';
```

## `useMenu` [#usemenu]

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

```ts
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**

```tsx
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` [#usenavdata]

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

```ts
useNavData(): NavData
```

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

**Example**

```tsx
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` [#usemegamenu]

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

```ts
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**

```tsx
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` [#usenavproducts]

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

```ts
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**

```tsx
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>
  );
}
```