Developers
Start building
Themes/Theme SDK/Modules/navigation/Types: BreadcrumbItem to NavMenuProps

Types: BreadcrumbItem to NavMenuProps

The types of @poltura/theme-sdk/navigation, BreadcrumbItem to NavMenuProps.

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

One step of a breadcrumb trail.

labelrequiredstring

The step's text in the page language.

hrefrequiredstring | null

Where the step links, or null for the current page.

MegaMenuPanelProps

Props a mega menu spreads on its panel.

refrequired(node: HTMLElement | null) => void

Attaches the panel.

idrequiredstring

The panel's element id.

rolerequired'group'

The panel is a group of links.

aria-labelledbyrequiredstring

The trigger's element id.

hiddenrequiredboolean

Hides the panel while it is closed.

onClickrequired(event: MouseEvent<HTMLElement>) => void

Closes the panel when a link in it is followed.

onKeyDownrequired(event: KeyboardEvent<HTMLElement>) => void

Arrow keys, Home and End walk the panel's links; Escape closes it and returns to the trigger.

onBlurrequired(event: FocusEvent<HTMLElement>) => void

Closes the panel when the focus leaves the menu.

MegaMenuRootProps

Props a mega menu spreads on its root element.

refrequired(node: HTMLElement | null) => void

Attaches the root element.

onMouseEnterrequired(() => void) | undefined

Opens the panel on hover, when the menu opens on hover.

onMouseLeaverequired(() => void) | undefined

Closes the panel a moment after the pointer leaves, when the menu opens on hover.

MegaMenuState

One mega menu item's panel: whether it is open, the actions and the props that wire its keyboard model.

openrequiredboolean

Whether the panel is open.

openPanelrequired() => void

Opens the panel and closes every other panel of the same menu.

closerequired() => void

Closes the panel.

rootPropsrequiredMegaMenuRootProps

Props for the item's root element.

triggerPropsrequiredMegaMenuTriggerProps

Props for the link or button that opens the panel.

panelPropsrequiredMegaMenuPanelProps

Props for the panel.

MegaMenuTriggerProps

Props a mega menu spreads on the link or button that opens its panel.

refrequired(node: HTMLElement | null) => void

Attaches the trigger.

idrequiredstring

The trigger's element id, which labels the panel.

aria-expandedrequiredboolean

Whether the panel is open.

aria-controlsrequiredstring

The panel's element id.

onClickrequired(event: MouseEvent<HTMLElement>) => void

Toggles the panel when the menu opens on click.

onKeyDownrequired(event: KeyboardEvent<HTMLElement>) => void

Arrow keys open the panel and walk into it; Space toggles it; Escape closes it.

onBlurrequired(event: FocusEvent<HTMLElement>) => void

Closes the panel when the focus leaves the menu.

A titled column of links, such as one column of the footer.

titlerequiredstring

The column's heading in the page language.

linksrequiredreadonly MenuLink[]

The column's links; their children are listed under them.

A store menu: the main menu, the quick links or the legal links of the footer.

type MenuHandle = 'primary' | 'footerQuick' | 'footerLegal'

One link of a store menu, with the links under it.

idrequiredstring | null

Stable across reorders, so a panel can be bound to the link; null for links filled in from a category or page.

labelrequiredstring

The link's text in the page language.

hrefrequiredstring

Where the link goes.

opensrequired'hover' | 'click' | null

How the link's submenu opens, or null to follow the menu's own setting.

iconIconValue | null

The icon of the category the link was filled in from, drawn with `Icon`; null or absent otherwise.

childrenrequiredreadonly MenuLink[]

The links under this one; categories and pages arrive with theirs filled in.

A category in the navigation tree, with its subcategories.

idrequiredstring

The category's id.

namerequiredstring

The category's name in the page language.

hrefrequiredstring

The category's page.

iconrequiredIconValue | null

The icon the merchant chose for the category, drawn with `Icon`; null when it has none.

parentIdrequiredstring | null

The id of the category it sits under, or null for a top-level category.

childrenrequiredreadonly NavCategory[]

Its subcategories, in the merchant's order.

Everything navigation draws from: the category tree and the site's pages.

categoriesrequiredreadonly NavCategory[]

The top-level categories, each with its subcategories.

pagesrequiredreadonly NavPage[]

The store's site pages.

A page of the store's site, such as About us, that menus can link to.

hrefrequiredstring

The page's address.

titlerequiredstring

The page's title in the page language.

How a menu link's children open: a dropdown list under it, or a wide panel across the header.

type SubmenuStyle = 'dropdown' | 'panel'

MegaMenuOptions

Options of useMegaMenu.

openOn'hover' | 'click'

Whether the panel opens on hover or on click; defaults to hover.

forceOpenboolean

Holds the panel open, such as while the merchant edits it in the customizer.

Props of MainNav.

linksreadonly MenuLink[]

The links to draw; defaults to the store's main menu.

submenuSubmenuStyle

How a link's children open; defaults to a dropdown.

openOn'hover' | 'click'

Whether submenus open on hover or on click; defaults to hover.

flatboolean

Draws the top level only, with no submenus.

classNamestring

Classes added to the menu bar.

linkClassNamestring

Classes added to each top-level link.

MobileNavProps

Props of MobileNav.

linksreadonly MenuLink[]

The links to draw; defaults to the store's main menu.

classNamestring

Classes added to the list.

What NavMenu hands to its trigger renderer.

openrequiredboolean

Whether the panel is open.

triggerPropsrequiredMegaMenuTriggerProps

Props to spread on the link or button that opens the panel.

What NavMenu hands to its panel renderer.

openrequiredboolean

Whether the panel is open.

closerequired() => void

Closes the panel.

itemsrequiredreadonly MenuLink[]

The links the panel shows.

panelPropsrequiredMegaMenuPanelProps

Props to spread on the panel.

Props of NavMenu.

itemsrequiredreadonly MenuLink[]

The links the panel shows.

openOn'hover' | 'click'

Whether the panel opens on hover or on click; defaults to hover.

forceOpenboolean

Holds the panel open, such as while the merchant edits it.

renderTriggerrequired(trigger: NavMenuTrigger) => ReactNode

Draws the link or button that opens the panel.

renderPanelrequired(panel: NavMenuPanel) => ReactNode

Draws the panel.

Last updated