Global navigation

Nav components are the building blocks for creating the global navigation bar for your experience.

Reference design

This is an example of how the navigation components can be used together to create a global navigation system for your product experience that is consistent with other global navigation bars across Pluralsights apps.

TITLE
import { AccountIcon, BrowseIcon NotificationsIcon } from '@pluralsight/ps-design-system-icon'
import { layout } from '@pluralsight/ps-design-system-core'
import NavBar from '@pluralsight/ps-design-system-navbar'
import NavBrand from '@pluralsight/ps-design-system-navbrand'
import NavItem from '@pluralsight/ps-design-system-navitem'
import NavUser from '@pluralsight/ps-design-system-navuser'
import NavCookieBanner from '@pluralsight/ps-design-system-navcookiebanner'
import React from 'react'
function Example() {
return <NavBar
brand={<NavBrand logo={<MyLogo />} wordmark="TITLE" />}
items={
<>
<div
style={{
marginRight: layout.spacingXXSmall,
display: 'inline-block'
}}
>
<NavItem icon={<HomeIcon />}>Home</NavItem>
</div>
<div
style={{
display: 'inline-block'
}}
>
<NavItem icon={<BrowseIcon />} selected>
Browse
</NavItem>
</div>
</>
}
onMobileMenuClick={() => alert('mobile click')}
user={
<NavUser
name="Jake"
planName="Accenture"
onClick={() => alert('user click')}
/>
}
utility={
<React.Fragment>
<div
style={{
marginRight: layout.spacingXXSmall,
display: 'inline-block'
}}
>
<NavItem icon={<NotificationsIcon />} />
</div>
<div
style={{
display: 'inline-block'
}}
>
<NavItem icon={<AccountIcon />} />
</div>
</React.Fragment>
}
/>
}
export default Example
function MyLogo() {
return (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" fill="url(#logo)" />
<defs>
<linearGradient id="logo" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
<stop stopColor="#8A99A8" />
<stop offset="1" stopColor="#576675" />
</linearGradient>
</defs>
</svg>
)
}

To ensure consistency when navigating across product experiences with different global navigation:

  • Always keep the navigation bar height 56px.
  • The navigation bar should be fluid and sticky to the left/top/right edges of the browser viewport. This will happen automatically if you use the app frame component.
  • The brand, utility, and user elements should always be in the same place to ensure consistency across products. Brand on the left, utility and user on the right.
  • The items visible to a user in the product switcher should be the same across all products.

Example

The nav bar component is the container of the global navigation. It’s 56px tall and should be fluid and sticky to the left/top/right of the browser viewport.

Brand
Items
Utility
User
import { colorsPink, layout } from '@pluralsight/ps-design-system-core'
import NavBar from '@pluralsight/ps-design-system-navbar'
import React from 'react'
function Filler(props) {
return (
<div className="filler">
{props.children}
<style jsx>{`
.filler {
display: flex;
align-items: center;
justify-content: center;
color: ${colorsPink.base};
height: 100%;
border: 2px dashed ${colorsPink.base};
padding: 0 ${layout.spacingMedium};
}
`}</style>
</div>
)
}
function Example() {
return (
<NavBar
brand={<Filler>Brand</Filler>}
items={<Filler>Items</Filler>}
user={<Filler>User</Filler>}
utility={<Filler>Utility</Filler>}
/>
)
}
export default Example
  • Version
  • Install
    npm install @pluralsight/ps-design-system-navbar
  • Import
    import NavBar from '@pluralsight/ps-design-system-navbar'
Name
Type
Description
Default
brandReact.ReactNodeglobal product branding
itemsReact.ReactNodetop-level nav affordances
onMobileMenuClickEvent => ()displays hamburger menu; called on click
utilityReact.ReactNodetop-right affordances next to user
userReact.ReactNodeuser profile affordance

Examples

The nav item component is for creating links to pages or as action triggers. A horizontal variant can be used with or without an icon. The vertical variant always requires an icon. The icon-only variant can also be used for very recognizable icons/actions when a label is unecessary.

import {
colorsBackgroundDark,
layout
} from '@pluralsight/ps-design-system-core'
import { HomeIcon } from '@pluralsight/ps-design-system-icon'
import NavItem from '@pluralsight/ps-design-system-navitem'
import React from 'react'
function Example() {
return (
<div className="example-grid">
<NavItem icon={<HomeIcon />} menu={<div>placeholder</div>}>
Label
</NavItem>
<NavItem icon={<HomeIcon />}>Label</NavItem>
<NavItem menu={<div>placeholder</div>}>Label</NavItem>
<NavItem renderContainer={props => <a href="#" {...props} />}>
Label
</NavItem>
<NavItem icon={<HomeIcon />} alignment={NavItem.alignments.vertical}>
Label
</NavItem>
<NavItem
icon={<HomeIcon />}
alignment={NavItem.alignments.vertical}
menu={<div>placeholder</div>}
>
Label
</NavItem>
<NavItem icon={<HomeIcon />} />
</div>
)
}
export default Example
  • Be prudent with the nav items and the the number you use. Try to keep it to about about 2-5. Organize the items well, use short yet descriptive labels, and use grouping with dropdown menus if you need more items than will fit.
  • Use icon only nav items when the icon clearly represents what the nav item is or does. Use tooltips with icon only nav items.
  • Version
  • Install
    npm install @pluralsight/ps-design-system-navitem
  • Import
    import NavItem from '@pluralsight/ps-design-system-navitem'
Name
Type
Description
Default
alignment
horizontal | vertical
orientation of item elementshorizontal
barReact.ReactNodeactive element indicator
childrenReact.ReactNodelabel
renderContainer(props) => React.ReactNoderender custom link element
iconReact.ReactNodeicon displayed
menubooleantoggles render of down caretfalse
selectedbooleantoggles active statefalse

Examples

The nav brand component creates a consistent use of branding for the icon and logo of an app. It is intended to always be placed at the left end of the nav bar.

TITLE
import {
colorsBackgroundDark,
layout
} from '@pluralsight/ps-design-system-core'
import { HomeIcon } from '@pluralsight/ps-design-system-icon'
import NavBrand from '@pluralsight/ps-design-system-navbrand'
import React from 'react'
function Example() {
return (
<div className="example-grid">
<NavBrand logo={<MyLogo />} wordmark="TITLE" />
</div>
)
}
export default Example
function MyLogo() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="24" height="24" fill="url(#logo)" />
<defs>
<linearGradient
id="logo"
x1="0"
y1="0"
x2="24"
y2="24"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8A99A8" />
<stop offset="1" stopColor="#576675" />
</linearGradient>
</defs>
</svg>
)
}
  • Use the nav brand component to provide consistency between experiences.
  • Version
  • Install
    npm install @pluralsight/ps-design-system-navbrand
  • Import
    import NavBrand from '@pluralsight/ps-design-system-navbrand'
Name
Type
Description
Default
hrefstringdestination url; renders anchor
logoReact.ReactNodebrand logo
onClickEvent => voidclick handler
wordmarkReact.ReactNodebrand logo

Examples

The nav user component is for actions & settings related to the user. It is intended to always be placed at the right end of the nav bar. For wider screens, text can be displayed for the user’s name and a meta item (such as a plan name) or only a name. When the screen is narrow, the text will be dropped.

Name
Meta
Name
import {
colorsBackgroundDark,
layout
} from '@pluralsight/ps-design-system-core'
import NavUser from '@pluralsight/ps-design-system-navuser'
import React from 'react'
function Example() {
return (
<div className="example-grid--col-3">
<NavUser
name="Name"
meta="Meta"
src="https://en.gravatar.com/userimage/8399312/b15448d840afacd0eb18102baf788255.jpeg"
/>
<NavUser
name="Name"
src="https://en.gravatar.com/userimage/8399312/b15448d840afacd0eb18102baf788255.jpeg"
/>
<NavUser src="https://en.gravatar.com/userimage/8399312/b15448d840afacd0eb18102baf788255.jpeg" />
</div>
)
}
export default Example
  • Version
  • Install
    npm install @pluralsight/ps-design-system-navuser
  • Import
    import NavUser from '@pluralsight/ps-design-system-navuser'
Name
Type
Description
Default
hrefstringdestination url; renders anchor
onClickEvent => voidclick handler
metaReact.ReactNodeuser context
nameReact.ReactNodeuser name
srcstringuser profile image url

Example

The nav cookie banner is common nav element that should be present on the page in order to comply with laws requiring notice that cookies are used in our product. It will be affixed to the bottom/left of the app frame.

Learn more about your privacy

import NavCookieBanner from '@pluralsight/ps-design-system-navcookiebanner'
import React from 'react'
function Example() {
return (
<div className="example">
<NavCookieBanner />
<style jsx>{`
.example > div {
position: static;
display: inline-flex;
}
`}</style>
</div>
)
}
export default Example
  • Version
  • Install
    npm install @pluralsight/ps-design-system-navcookiebanner
  • Import
    import NavCookieBanner from '@pluralsight/ps-design-system-navcookiebanner'
Name
Type
Description
Default
cookieOptions{ domain: string, expires: Date, secure: boolean, sameSite: string }attributes of cookie
messageReact.ReactNodemessaging re cookies
privacyUpdatedDateDatedate of last terms update