useNavigationItems

Retrieve the registered navigation items from the FireflyRuntime instance.

Reference

const navigationItems = useNavigationItems(options?: { menuId? })

Parameters

  • options: An optional object literal of options:
    • menuId: An optional id to retrieve the navigation menu for a specific menu.

Returns

An array of RootNavigationItem, an alias of NavigationLink | NavigationSection. The items are returned as is, in registry insertion order: this hook does not sort. Use useRenderedNavigationItems to get the items sorted by $priority at every depth.

Accept any properties of a React Router Link component with the addition of:

  • $id: An optional identifier for the link. Usually used as the React element key property.
  • $label: The link label. Could either by a string or a ReactNode.
  • $canRender: An optional function accepting an object and returning a boolean indicating whether or not the link should be rendered.
  • $priority: An optional order priority affecting the position of the item in the menu (higher first). See useRenderedNavigationItems.
  • $additionalProps: An optional object literal of additional props to spread onto the link component.
  • $context: An optional object literal of data for the code rendering the menu to read. Never spread onto the link component.
  • $id: An optional identifier for the section. Usually used to nest navigation items under a specific section and as the React element key property.
  • $label: The section label. Could either by a string or a ReactNode.
  • $canRender: An optional function accepting an object and returning a boolean indicating whether or not the section should be rendered.
  • $priority: An optional order priority affecting the position of the item in the menu (higher first). See useRenderedNavigationItems.
  • $additionalProps: An optional object literal of additional props to spread onto the section component.
  • $context: An optional object literal of data for the code rendering the menu to read. Never spread onto the section component.
  • children: The section items.

Usage

Retrieve the items for the root menu

import { useNavigationItems } from "@squide/firefly";

const items = useNavigationItems();

Retrieve the items for a specific menu

import { useNavigationItems } from "@squide/firefly";

const items = useNavigationItems({ menuId: "my-custom-menu" });