# Parts (/themes/sdk/reference/navigation/parts)

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

## `NavMenu` [#navmenu]

One menu item with a panel, where the theme draws the trigger and the panel and the part wires them.

```ts
NavMenu(props: NavMenuProps): ReactElement
```

**Props:** [`NavMenuProps`](/themes/sdk/reference/navigation/types-1#navmenuprops)

**Example**

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

export function Dropdown({ link }: { link: MenuLink }) {
  return (
    <NavMenu
      items={link.children}
      renderTrigger={({ triggerProps }) => (
        <button type='button' {...triggerProps}>{link.label}</button>
      )}
      renderPanel={({ items, panelProps }) => (
        <div {...panelProps}>
          {items.map((item) => (
            <a key={item.href} href={item.href}>{item.label}</a>
          ))}
        </div>
      )}
    />
  );
}
```

**See also:** [`useMegaMenu`](/themes/sdk/reference/navigation/hooks#usemegamenu)

## `MenuColumns` [#menucolumns]

Titled columns of links in a grid of up to three, such as the footer's; a link's children follow it in the same list.

```ts
MenuColumns(props: MenuColumnsProps): ReactElement | null
```

**Props:** [`MenuColumnsProps`](/themes/sdk/reference/navigation/types-2#menucolumnsprops)

**Example**

```tsx
import { MenuColumns, useMenu } from '@poltura/theme-sdk/navigation';

export function FooterLinks() {
  const quick = useMenu('footerQuick');
  const legal = useMenu('footerLegal');
  return (
    <MenuColumns
      columns={[
        { title: 'Shop', links: quick },
        { title: 'Legal', links: legal },
      ]}
    />
  );
}
```

## `Breadcrumbs` [#breadcrumbs]

A breadcrumb trail with the current page marked for assistive technology; nothing when it has no steps.

```ts
Breadcrumbs(props: BreadcrumbsProps): ReactElement | null
```

**Props:** [`BreadcrumbsProps`](/themes/sdk/reference/navigation/types-2#breadcrumbsprops)

**Example**

```tsx
import { Breadcrumbs } from '@poltura/theme-sdk/navigation';

export function Trail() {
  return (
    <Breadcrumbs
      items={[
        { label: 'Home', href: '/' },
        { label: 'Mugs', href: null },
      ]}
    />
  );
}
```

## `NavProducts` [#navproducts]

A heading over product rows with a thumbnail and title each, for a menu panel; nothing while there is nothing to show.

```ts
NavProducts(props: NavProductsProps): ReactElement | null
```

**Props:** [`NavProductsProps`](/themes/sdk/reference/navigation/types-2#navproductsprops)

**Example**

```tsx
import { NavProducts } from '@poltura/theme-sdk/navigation';

export function Featured() {
  return <NavProducts heading='Popular' by={{ handles: ['mug', 'poster'] }} />;
}
```

**See also:** [`useNavProducts`](/themes/sdk/reference/navigation/hooks#usenavproducts)