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;