@episerver/platform-navigation
Platform navigation component for Episerver
Last updated 25 days ago by ryanbare .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @episerver/platform-navigation 
SYNC missed versions from official npm registry.

Platform Navigation

This repository contains a react implementation of the Episerver platform navigation component.

Getting Started

Add @episerver/platform-navigation as a dependency

yarn add @episerver/platform-navigation

Import the Navigation component. If you are using TypeScript there are type definitions that will help you use it. You can look at the Storybook to see usage examples.

import { Navigation } from '@episerver/platform-navigation';

You will also need the styling.

import '@episerver/platform-navigation/dist/main.css';

In your HTML file, include the Barlow font in the head.

<link href="https://fonts.googleapis.com/css?family=Barlow:400,500,700" rel="stylesheet" />

Basic usage

User interaction for menuItems is handled by PlatformNavigation and will notify your application what item was selected with the callback onItemSelect. Your application is responsible for setting the selected items in the menu on both startup and after callbacks. If no selection is given the component will select the appropriate menu items for you according to the Design System guidelines.

User interaction for actionItems differ depending on the component used. Use NavigationBarIcon for direct links such as help documentation on another domain, and use ContextMenu for a menu of options such as user "settings" and "log out".

Note: A current limitation is that action items do not have an active state. So if a user navigates to an action sub-link such as My Settings / Language the navigation will highlight the first menu item and not My Settings.

With react-router-dom

export const Navigation = withRouter(({ history }) => {
    return (
        <PlatformNavigation
            menuItems={menuItems}
            onItemSelect={(levelOne, levelTwo) => {
                history.push((levelTwo || levelOne).url);
            }}
            product={{ name: "CMS", url: "/" }}
        />
    );
});

With page reloads

export const Navigation = ({ history }) => {
    return (
        <PlatformNavigation
            menuItems={menuItems}
            onItemSelect={(levelOne, levelTwo) => {
                window.location.href((levelTwo || levelOne).url);
            }}
            product={{ name: "CMS", url: "/" }}
        />
    );
};

With internal state

You should keep the state on an application level instead. For example using redux.

export const Navigation = ({ history, location }) => {
    const [levelOne, setLevelOne] = useState();
    const [levelTwo, setLevelTwo] = useState();

    return (
        <PlatformNavigation
            levelOne={levelOne}
            levelTwo={levelTwo}
            menuItems={menuItems}
            onItemSelect={(levelOne, levelTwo) => {
                setLevelOne(levelOne);
                setLevelTwo(levelTwo);
                // Change location or history here
            }}
            product={{ name: "CMS", url: "/" }}
        />
    );
};

With action links

Action links can be:

  1. NavigationBarIcon for internal navigation
  2. NavigationBarIcon with target for external links
  3. ContextMenu for a dropdown with links
export const Navigation = withRouter(({ history }) => {
    return (
        <PlatformNavigation
            menuItems={menuItems}
            onItemSelect={(levelOne, levelTwo) => { /* ... */ }}

            // actionItems takes an array of any React element, but there are two helper components included: NavigationBarIcon and ContextMenu.
            // Note: Items need to handle their own onClick event.
            actionItems={[
                <NavigationBarIcon key={1} onClick={ /* ... */ }>
                    <SearchIcon />
                </NavigationBarIcon>,
                <NavigationBarIcon key={2} onClick={ /* ... */ } href="http://www.episerver.com" target="_blank">
                    <HelpIcon />
                </NavigationBarIcon>,
                <ContextMenu key={3} icon={<AccountIcon />} menuItems={[
                    { name: "My Settings", url: "", onSelected:  /* ... */ },
                    { name: "External link", url: "https://episerver.com", target: "_blank", onSelected:  /* ... */ },
                    { name: "Logout", url: "", onSelected: /* ... */ }
                ]} />
            ]}
        />
    );
});

Releases

Releases will be created at the team's discretion. This should be done regularly when there are bug fixes or feature changes available. Releases follow semantic versioning. This means that, until there is a major version, minor versions may contain breaking changes.

See the CHANGELOG.md document for information about what is included in each release.

Internal

See the GUIDELINES.md document for more information about contributing and the release process.

Current Tags

  • 0.7.7                                ...           latest (25 days ago)

12 Versions

  • 0.7.7                                ...           25 days ago
  • 0.7.6                                ...           6 months ago
  • 0.7.5                                ...           10 months ago
  • 0.7.4                                ...           10 months ago
  • 0.7.3                                ...           a year ago
  • 0.7.2                                ...           a year ago
  • 0.7.1                                ...           a year ago
  • 0.7.0                                ...           a year ago
  • 0.6.0                                ...           a year ago
  • 0.5.0                                ...           a year ago
  • 0.4.0                                ...           a year ago
  • 0.3.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 9
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |