How to Use GDS Global Navigation

See it in Storybook

Component API

TIP: You can change the different values of the component props under the controls tab.

Install it

npm i @nielsen-media/gds-global-navigation

NOTE: Because the support for Web Components in React isn’t great we have to do some extra work to get the to work properly. We are going to use a package from lit-labs/react this will help us set up our web-components a bit better.

Install it

npm i lit-labs/react

Below is a recipe to get the GDS Button Component working in React and hooking up an event handler to it. This approach only uses lit-labs/react package. This package wraps our web component and allows us to use it in a React application.

You can read here and here about some of the hardship of Web Components + React. Also check out the documentation for lit-labs/react to use Web Components in React.

Use it

// Create Component

// Global Navigation
import React from "react";
import { createComponent } from "@lit-labs/react";

import Navigation from "@nielsen-media/gds-global-navigation/lib/src";

export const NavigationComponent = createComponent(
  React,
  "gds-global-navigation",
  Navigation,
  {}
);

export function GDSGlobalNavigation(props) {
  return (
    <GDSGlobalNavigation
      title={props.title}
      logo={props.logo}
      type={props.type}
      modules={props.modules}
      actions={props.actions}
      user={props.user}
      mode={props.mode}
    ></GDSGlobalNavigation>
  );
}

import React from "react";
import { NavigationComponent } from "../components/Navigation";

export const Navigation = () => {
  return (
    <div>
      <h2>Navigation - Basic</h2>
      <NavigationComponent />
      <h2>Navigation - Kitchen sink</h2>
      <NavigationComponent
        type="standard"
        title="Application Name"
        logo="nielsen"
        modules={[
          {
            id: "application-module-1",
            label: "Nielsen Module One",
            value: "/appliction-module-1",
          },
          {
            id: "application-module-2",
            label: "Nielsen One Planning",
            value: "/appliction-module-2",
          },
          {
            id: "application-module-3",
            label: "Application Module Name 3",
            value: "/appliction-module-3",
          },
          {
            id: "application-module-4",
            label: "Application Module Name 4",
            value: "/appliction-module-4",
          },
        ]}
        mode="light"
        actions={{
          hamburger: {
            enabled: true,
            action: (e: CustomEvent) => console.log(e),
          },
          search: {
            enabled: true,
            action: (e: CustomEvent) => console.log(e),
          },
          notifications: {
            enabled: true,
            action: null,
          },
          support: {
            enabled: true,
            action: null,
          },
          switcher: {
            enabled: true,
            action: null,
          },
          user: {
            enabled: true,
            action: null,
          },
        }}
      />
      <h2>Navigation - Nielsen One</h2>
      <NavigationComponent
        type="n1"
        title="Application Name"
        logo="nielsen"
        modules={[
          {
            id: "application-module-1",
            label: "Nielsen Module One",
            value: "/appliction-module-1",
          },
          {
            id: "application-module-2",
            label: "Nielsen One Planning",
            value: "/appliction-module-2",
          },
          {
            id: "application-module-3",
            label: "Application Module Name 3",
            value: "/appliction-module-3",
          },
          {
            id: "application-module-4",
            label: "Application Module Name 4",
            value: "/appliction-module-4",
          },
        ]}
        mode="light"
        actions={{
          hamburger: {
            enabled: true,
            action: (e: CustomEvent) => console.log(e),
          },
          search: {
            enabled: true,
            action: (e: CustomEvent) => console.log(e),
          },
          notifications: {
            enabled: true,
            action: null,
          },
          support: {
            enabled: true,
            action: null,
          },
          switcher: {
            enabled: true,
            action: null,
          },
          user: {
            enabled: true,
            action: null,
          },
        }}
      />
      <h2>Navigation - Dark Mode</h2>
      <NavigationComponent
        type="n1"
        title="Application Name"
        logo="nielsen"
        modules={[
          {
            id: "application-module-1",
            label: "Nielsen Module One",
            value: "/appliction-module-1",
          },
          {
            id: "application-module-2",
            label: "Nielsen One Planning",
            value: "/appliction-module-2",
          },
          {
            id: "application-module-3",
            label: "Application Module Name 3",
            value: "/appliction-module-3",
          },
          {
            id: "application-module-4",
            label: "Application Module Name 4",
            value: "/appliction-module-4",
          },
        ]}
        mode="dark"
        actions={{
          hamburger: {
            enabled: true,
            action: (e: CustomEvent) => console.log(e),
          },
          search: {
            enabled: true,
            action: (e: CustomEvent) => console.log(e),
          },
          notifications: {
            enabled: true,
            action: null,
          },
          support: {
            enabled: true,
            action: null,
          },
          switcher: {
            enabled: true,
            action: null,
          },
          user: {
            enabled: true,
            action: null,
          },
        }}
      />
    </div>
  );
};

export default Navigation;