The navigation components provide the building blocks for creating a global navigation system. These components are not a navigation product in itself like Prism, but will enable product organizations to own and operate their own global navigation while remaining consistent with other products in the Pluralsight family.

Install one or more of the component dependencies:

Include the React components in your project:

Nav bar

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.

Nav item

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.

Nav brand

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.

Nav user

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.

Nav cookie banner

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.

  • 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.
  • 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 the nav brand component to provide consistency between experiences.
  • Use icon only nav items when the icon clearly represents what the nav item is or does. Use tooltips with icon only nav items.

Here are some examples of how the navigation components can be used together to create consistent global navigation system for your app.

Open an issue