@berlitz/nav-widget

NavWidget component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzNavWidget from 'https://cdn.skypack.dev/@berlitz/nav-widget';
</script>

README

Component Name npm version

Provides a navigation bar useful for navigating different audiences to different webpages.

This component is used in the PageBanner of most Blitz websites.

Intended to work with the Course Wizard content type

Installation

yarn add @berlitz/nav-widget

Props

Prop Type Required Default Description
children element ✅ - Used to add the submit button
data array ✅ - Array of audience options. See propTypes for the shape.
defaultOption object ✅ - The audience option that should be selected by default.

Usage

import NavWidget from '@berlitz/nav-widget'

const SubmitButton = ({ label, firstOption, secondOption }) => {
  const linkUrl = secondOption || firstOption
  return <StyledNavLink to={linkUrl}>{label}</StyledNavLink>
}

const MyApp = () => (
  <NavWidget data={data} defaultOption={data[1]}>
    <SubmitButton />
  </NavWidget>
)