Component Name 
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
/>
)