Interface NavigationOptions

interface NavigationOptions {
    footerNavigationItems?: {
        text: string;
        to: string;
    }[];
    headerElements?: ((isLoggedIn) => NavigationHeaderElement);
    headerLogoElement?: ((onNavigate) => ReactNode);
    menuNavigationBlocks?: ComponentType<BlockComponentProps>[];
    screenMode: "desktop" | "mobile";
    sideNavigationBlocks?: ComponentType<BlockComponentProps>[];
    sideNavigationShrinkCutoff?: number;
}

Properties

footerNavigationItems? headerElements? headerLogoElement? menuNavigationBlocks? screenMode sideNavigationBlocks? sideNavigationShrinkCutoff?

Properties

Optional footerNavigationItems

footerNavigationItems?: {
    text: string;
    to: string;
}[]

Configured list of items to show in the footer.

Type declaration

  • text: string

    Text to display in the footer

  • to: string

    The block path to navigate to when this item is clicked

Optional headerElements

headerElements?: ((isLoggedIn) => NavigationHeaderElement)

Configured list of items (blocks) to show in the center of the header. e.g. mail info, notification, login buttons etc.

Type declaration

Optional headerLogoElement

headerLogoElement?: ((onNavigate) => ReactNode)

Element to place in the top left of the screen; typically a logo.

Type declaration

    • (onNavigate): ReactNode

    • Element to place in the top left of the screen; typically a logo.

      Parameters

      • onNavigate: ((to, options?) => void)
          • (to, options?): void

          • Parameters

            • to: string
            • Optional options: NavigateOptions

            Returns void

      Returns ReactNode

Optional menuNavigationBlocks

menuNavigationBlocks?: ComponentType<BlockComponentProps>[]

Configured list of blocks to show in the top-right menu. These should return components.

screenMode

screenMode: "desktop" | "mobile"

The screen mode to render the navigation in. In future, it may make more sense to make two separate navigation components rather than using this prop.

Optional sideNavigationBlocks

sideNavigationBlocks?: ComponentType<BlockComponentProps>[]

Configured list of blocks to show in the sidebar. These should return components. If this array is empty or not provided, the sidebar will not be shown.

Optional sideNavigationShrinkCutoff

sideNavigationShrinkCutoff?: number

When provided, the side navigation will shrink when the screen width is less than this value. If the user overrides this shrink by pressing the button, their preference will be maintained until they resize the page again. Default is 950px.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc