@berlitz/top-nav

TopNav component for the Max Design System

Usage no npm install needed!

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

README

Component Name npm version

Top navigation component used for Project Blitz marketing sites.

Installation

yarn add @berlitz/top-nav

Props

Argument Type Required Default Notes
logo node ✅ - Node to be used for logo on mobile and desktop
primaryLinks refer to propTypes ✅ - Array of links (nodes) or dropdowns (objects) to be used for the primary navigation
mobileLinks refer to propTypes ✅ - Array of links (nodes) or dropdowns (objects) to be used for the mobile navigation
secondaryLinks refer to propTypes ❌ - Array of links (nodes) to be used for the secondary navigation
topRightComponents node ❌ - Node that displays above the primary navigation to the far right
activeLanguage string ❌ - String to display the active language as the label for the LanguageDropDown
isDark boolean ❌ false Sets text and icons to a dark colour for use on a light background
languageLinks array ❌ - Array of links (nodes) used to navigate a translation of the current page
priorityNumber number ❌ 4 Sets the number of bottomLinks to show before collapsing them into a 'More' dropdown
sticky bool ❌ - Sets whether the TopNav is stuck to the top of the page
stickyNavCta node ❌ - Node that shows to the far right of the desktop sticky navigation. Ideal for a call to action button
stickyScrollThreshold number ❌ 600 The value (in pixels) used to calculate how far a user must scroll before the TopNav becomes sticky
telNumber string ❌ - Telephone number to be displayed on desktop and for the click to call on mobile

Usage

import TopNav from '@berlitz/top-nav'
const MyApp = () => (
  <TopNav
    activeLanguage={activeLanguage}
    languageLinks={languageLinks}
    logo={logo}
    mobileLinks={mobileLinks}
    primaryLinks={primaryLinks}
    priorityNumber={4}
    secondaryLinks={secondaryLinks}
    stickyNavCta={<Button>Click me</Button>}
    stickyScrollThreshold={400}
    telNumber="1 2345 6789"
    isDark
    sticky
  />
)