No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Internet Header

For external, client facing applications.

<swisspost-internet-header
  project="test"
  environment="int01"
  language="en"
></swisspost-internet-header>
NameDescriptionDefaultControl
Required props
project*
Your project id, previously passed as query string parameter serviceId.
string
-
Optional props
environment
Target environment. Choose 'int01' for local testing.
"dev01""dev02""devs1""int01""int02""prod""test"
'prod'
-
language
Initial language to be used. Overrides automatic language detection.
"de""en""fr""it"undefined
activeRoute

Set the currently activated route. If there is a link matching this URL in the header, it will be highlighted. Will also highlight partly matching URLs. When set to auto, will use current location.href for comparison.

booleanstringundefined
'auto'
fullWidth
Displays the header at full width for full-screen applications
booleanundefined
false
languageCookieKey
The header uses this cookie to set the language. Disables automatic language detection.
stringundefined
-
languageLocalStorageKey
The header uses this local storage key to set the language. Disables automatic language selection.
stringundefined
'swisspost-internet-header-language'
-
login
Toggle the login link (when logged out) or the user widget (when logged in).
boolean
true
logoutUrl
Override the logout-url provided by the portal config.
stringundefined
-
meta
Toggle the meta navigation.
boolean
true
search
Toggle the search button.
boolean
true
skiplinks
Toggle skiplinks. They help keyboard users to quickly jump to important sections of the page.
boolean
true
stickyness
Sticky behaviour of the header.
"full""main""minimal""none"
'minimal'
Overrides
customConfig
Customize the header config loaded from the post portal.
ICustomConfig
languageSwitchOverrides

Override the language switch links with custom URLs. Helpful when your application contains sub-pages, and you would like to stay on subpages when the user changes language.

IAvailableLanguage[]
osFlyoutOverrides
Online Services only: Add custom links to the special online service navigation entry
NavMainEntity
Deprecated
configProxy
DEPRECATED!: Define a proxy URL for the config fetch request. Will be removed in the next major version
stringundefined
-
events
headerLoaded
Fires when the header has been rendered to the page.
void
--
methods
getCurrentLanguage
Get the currently set language as a two letter string ("de", "fr" "it" or "en")
getCurrentLanguage() => Promise<'de' | 'fr' | 'it' | 'en' | string>
--