Caspeco WebComponents - v3.7.0
    Preparing search index...

    Caspeco WebComponents - v3.7.0

    @caspeco/navigation-core

    NPM Version

    This package installs the TypeScript type definitions for the <caspeco-navigation-menu> Web Component as well as some utility functions.

    Install the package from npm.

    npm i @caspeco/navigation-core

    To make sure you are passing the correct props, you can use the NavigationMenuProps type:

    import type { NavigationMenuProps } from "@caspeco/navigation-core";

    export const NavigationMenu = () => {
        const navProps: NavigationMenuProps = {
            currentLocation: window.location.href,
            itemGroup: "Staff",
            // etc ...
        };

        return <caspeco-navigation-menu {...navProps}></caspeco-navigation-menu>;
    };

    The context contains information about the company (or system!) that the user has selected in the context selector.

    To read the RMS context correctly, you can use the getRmsContext() function:

    import { getRmsContext } from "@caspeco/navigation-core";

    function getContextId(): string {
        const { companyId, systemName } = getRmsContext();
        return companyId ?? systemName;
    }

    If you need to, you can also setRmsContext(), but the use case for this should be rare. Make sure that you trigger a page navigation (either reload the page or redirect the user) after setting the context.

    By default, when a user changes their context in the context selector, their selection is saved in browser storage and they are redirected to the overview page. In some cases you may want to send them somewhere else (e.g. Cloud App wants to send people to /cloud/home), in which case you can intercept and cancel the context-selected Custom Event:

    import { setRmsContext, type RmsContext, type ContextSelectedEventName } from "./public/types/events";

    useEffect(() => {
        const eventName: ContextSelectedEventName = "context-selected";

        function handleContextChanged(event: Event) {
            if (!(event instanceof CustomEvent)) {
                return;
            }

            // Cancel default behavior
            event.preventDefault();

            // Set the context
            const newContext = event.detail as RmsContext;
            setRmsContext(newContext);

            // Redirect somewhere other than the Overview page
            window.location.href = "rms.caspeco.se/cloud/home";
        }

        window.addEventListener(eventName, handleContextChanged);

        return () => {
            window.removeEventListener(eventName, handleContextChanged);
        };
    }, []);

    Installing <caspeco-navigation-menu>

    Available in >=3.8.0-alpha.0

    import {
      getNavigationScriptData,
    } from '@caspeco/navigation-core';

    const { src, id } = getNavigationScriptData({ environment: 'stage' });
    const script = document.createElement("script");
    script.id = id;
    script.src = src;
    script.type = "module";
    document.head.appendChild(script);

    Will skip injection if it already exists in the DOM.

    import {
      getNavigationHTMLScriptElement,
    } from '@caspeco/navigation-core';

    const { scriptElement, data } = getNavigationHTMLScriptElement({ environment: 'stage' });
    document.head.appendChild(scriptElement);

    Will skip injection if it already exists in the DOM.

    import {
      injectHTMLNavigationElement,
    } from '@caspeco/navigation-core';

    injectHTMLNavigationElement({ environment: 'stage' });

    Add it manually by importing the deployed script from our CDN urls, e.g.:

    <script type="module" src="https://webcomponents.caspeco.net/v3/index.js"></script>
    • Development: https://webcomponents.dev.caspeco.net/v{MAJOR_VERSION}/index.js
    • Stage: https://webcomponents.stage.caspeco.net/v{MAJOR_VERSION}/index.js
    • Production: https://webcomponents.caspeco.net/v{MAJOR_VERSION}/index.js

    On small devices (< 768px) the navigation is turned into a mobile navigation bar at the bottom of the screen. When this happens, the mobile-nav class is added to the root html document.

    You may need to update your application to respond to this change, for example to change the height of your application from 100% to calc(100% - var(--mobile-navigation-height)). The --mobile-navigation-height is automatically added on your root html document when the navigation is installed.

    This is an example of what had to be done on the Overview page:

    main {
    height: 100%;
    /* ... */
}

+ .mobile-nav main {
+     height: calc(100% - var(--mobile-navigation-height));
+ }

    The navigation will overwrite your existing favicons with the correctly branded favicons as soon as it loads.

    dev favicon stage favicon prod favicon

    As of 2025-04-08 the navigation does not change your document.title, but soon it will modify it automatically depending on the page's name in the navigation.

    Settings

    Member Visibility

    On This Page

    @caspeco/navigation-core