# Types: BreadcrumbItem to NavMenuProps (/themes/sdk/reference/navigation/types-1)

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

## `BreadcrumbItem` [#breadcrumbitem]

One step of a breadcrumb trail.

<TypeTable type={{"label":{"description":"The step's text in the page language.","type":"string","required":true},"href":{"description":"Where the step links, or null for the current page.","type":"string | null","required":true}}} />

## `MegaMenuPanelProps` [#megamenupanelprops]

Props a mega menu spreads on its panel.

<TypeTable type={{"ref":{"description":"Attaches the panel.","type":"(node: HTMLElement | null) => void","required":true},"id":{"description":"The panel's element id.","type":"string","required":true},"role":{"description":"The panel is a group of links.","type":"'group'","required":true},"aria-labelledby":{"description":"The trigger's element id.","type":"string","required":true},"hidden":{"description":"Hides the panel while it is closed.","type":"boolean","required":true},"onClick":{"description":"Closes the panel when a link in it is followed.","type":"(event: MouseEvent<HTMLElement>) => void","required":true},"onKeyDown":{"description":"Arrow keys, Home and End walk the panel's links; Escape closes it and returns to the trigger.","type":"(event: KeyboardEvent<HTMLElement>) => void","required":true},"onBlur":{"description":"Closes the panel when the focus leaves the menu.","type":"(event: FocusEvent<HTMLElement>) => void","required":true}}} />

## `MegaMenuRootProps` [#megamenurootprops]

Props a mega menu spreads on its root element.

<TypeTable type={{"ref":{"description":"Attaches the root element.","type":"(node: HTMLElement | null) => void","required":true},"onMouseEnter":{"description":"Opens the panel on hover, when the menu opens on hover.","type":"(() => void) | undefined","required":true},"onMouseLeave":{"description":"Closes the panel a moment after the pointer leaves, when the menu opens on hover.","type":"(() => void) | undefined","required":true}}} />

## `MegaMenuState` [#megamenustate]

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

<TypeTable type={{"open":{"description":"Whether the panel is open.","type":"boolean","required":true},"openPanel":{"description":"Opens the panel and closes every other panel of the same menu.","type":"() => void","required":true},"close":{"description":"Closes the panel.","type":"() => void","required":true},"rootProps":{"description":"Props for the item's root element.","type":"MegaMenuRootProps","required":true},"triggerProps":{"description":"Props for the link or button that opens the panel.","type":"MegaMenuTriggerProps","required":true},"panelProps":{"description":"Props for the panel.","type":"MegaMenuPanelProps","required":true}}} />

## `MegaMenuTriggerProps` [#megamenutriggerprops]

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

<TypeTable type={{"ref":{"description":"Attaches the trigger.","type":"(node: HTMLElement | null) => void","required":true},"id":{"description":"The trigger's element id, which labels the panel.","type":"string","required":true},"aria-expanded":{"description":"Whether the panel is open.","type":"boolean","required":true},"aria-controls":{"description":"The panel's element id.","type":"string","required":true},"onClick":{"description":"Toggles the panel when the menu opens on click.","type":"(event: MouseEvent<HTMLElement>) => void","required":true},"onKeyDown":{"description":"Arrow keys open the panel and walk into it; Space toggles it; Escape closes it.","type":"(event: KeyboardEvent<HTMLElement>) => void","required":true},"onBlur":{"description":"Closes the panel when the focus leaves the menu.","type":"(event: FocusEvent<HTMLElement>) => void","required":true}}} />

## `MenuColumn` [#menucolumn]

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

<TypeTable type={{"title":{"description":"The column's heading in the page language.","type":"string","required":true},"links":{"description":"The column's links; their children are listed under them.","type":"readonly MenuLink[]","required":true}}} />

## `MenuHandle` [#menuhandle]

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

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

## `MenuLink` [#menulink]

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

<TypeTable type={{"id":{"description":"Stable across reorders, so a panel can be bound to the link; null for links filled in from a category or page.","type":"string | null","required":true},"label":{"description":"The link's text in the page language.","type":"string","required":true},"href":{"description":"Where the link goes.","type":"string","required":true},"opens":{"description":"How the link's submenu opens, or null to follow the menu's own setting.","type":"'hover' | 'click' | null","required":true},"icon":{"description":"The icon of the category the link was filled in from, drawn with `Icon`; null or absent otherwise.","type":"IconValue | null","required":false},"children":{"description":"The links under this one; categories and pages arrive with theirs filled in.","type":"readonly MenuLink[]","required":true}}} />

## `NavCategory` [#navcategory]

A category in the navigation tree, with its subcategories.

<TypeTable type={{"id":{"description":"The category's id.","type":"string","required":true},"name":{"description":"The category's name in the page language.","type":"string","required":true},"href":{"description":"The category's page.","type":"string","required":true},"icon":{"description":"The icon the merchant chose for the category, drawn with `Icon`; null when it has none.","type":"IconValue | null","required":true},"parentId":{"description":"The id of the category it sits under, or null for a top-level category.","type":"string | null","required":true},"children":{"description":"Its subcategories, in the merchant's order.","type":"readonly NavCategory[]","required":true}}} />

## `NavData` [#navdata]

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

<TypeTable type={{"categories":{"description":"The top-level categories, each with its subcategories.","type":"readonly NavCategory[]","required":true},"pages":{"description":"The store's site pages.","type":"readonly NavPage[]","required":true}}} />

## `NavPage` [#navpage]

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

<TypeTable type={{"href":{"description":"The page's address.","type":"string","required":true},"title":{"description":"The page's title in the page language.","type":"string","required":true}}} />

## `SubmenuStyle` [#submenustyle]

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

```ts
type SubmenuStyle = 'dropdown' | 'panel'
```

## `MegaMenuOptions` [#megamenuoptions]

Options of [`useMegaMenu`](/themes/sdk/reference/navigation/hooks#usemegamenu).

<TypeTable type={{"openOn":{"description":"Whether the panel opens on hover or on click; defaults to hover.","type":"'hover' | 'click'","required":false},"forceOpen":{"description":"Holds the panel open, such as while the merchant edits it in the customizer.","type":"boolean","required":false}}} />

## `MainNavProps` [#mainnavprops]

Props of [`MainNav`](/themes/sdk/reference/navigation/defaults-1#mainnav).

<TypeTable type={{"links":{"description":"The links to draw; defaults to the store's main menu.","type":"readonly MenuLink[]","required":false},"submenu":{"description":"How a link's children open; defaults to a dropdown.","type":"SubmenuStyle","required":false},"openOn":{"description":"Whether submenus open on hover or on click; defaults to hover.","type":"'hover' | 'click'","required":false},"flat":{"description":"Draws the top level only, with no submenus.","type":"boolean","required":false},"className":{"description":"Classes added to the menu bar.","type":"string","required":false},"linkClassName":{"description":"Classes added to each top-level link.","type":"string","required":false}}} />

## `MobileNavProps` [#mobilenavprops]

Props of [`MobileNav`](/themes/sdk/reference/navigation/defaults-2#mobilenav).

<TypeTable type={{"links":{"description":"The links to draw; defaults to the store's main menu.","type":"readonly MenuLink[]","required":false},"className":{"description":"Classes added to the list.","type":"string","required":false}}} />

## `NavMenuTrigger` [#navmenutrigger]

What [`NavMenu`](/themes/sdk/reference/navigation/parts#navmenu) hands to its trigger renderer.

<TypeTable type={{"open":{"description":"Whether the panel is open.","type":"boolean","required":true},"triggerProps":{"description":"Props to spread on the link or button that opens the panel.","type":"MegaMenuTriggerProps","required":true}}} />

## `NavMenuPanel` [#navmenupanel]

What [`NavMenu`](/themes/sdk/reference/navigation/parts#navmenu) hands to its panel renderer.

<TypeTable type={{"open":{"description":"Whether the panel is open.","type":"boolean","required":true},"close":{"description":"Closes the panel.","type":"() => void","required":true},"items":{"description":"The links the panel shows.","type":"readonly MenuLink[]","required":true},"panelProps":{"description":"Props to spread on the panel.","type":"MegaMenuPanelProps","required":true}}} />

## `NavMenuProps` [#navmenuprops]

Props of [`NavMenu`](/themes/sdk/reference/navigation/parts#navmenu).

<TypeTable type={{"items":{"description":"The links the panel shows.","type":"readonly MenuLink[]","required":true},"openOn":{"description":"Whether the panel opens on hover or on click; defaults to hover.","type":"'hover' | 'click'","required":false},"forceOpen":{"description":"Holds the panel open, such as while the merchant edits it.","type":"boolean","required":false},"renderTrigger":{"description":"Draws the link or button that opens the panel.","type":"(trigger: NavMenuTrigger) => ReactNode","required":true},"renderPanel":{"description":"Draws the panel.","type":"(panel: NavMenuPanel) => ReactNode","required":true}}} />