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

Parts

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

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

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

NavMenu(props: NavMenuProps): ReactElement

Props: NavMenuProps

Example

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

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.

MenuColumns(props: MenuColumnsProps): ReactElement | null

Props: MenuColumnsProps

Example

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 },
      ]}
    />
  );
}

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

Breadcrumbs(props: BreadcrumbsProps): ReactElement | null

Props: BreadcrumbsProps

Example

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

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

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

NavProducts(props: NavProductsProps): ReactElement | null

Props: NavProductsProps

Example

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

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

See also: useNavProducts

Last updated