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
Deprecated: boolean values will no longer be accepted in the next major release. Use "none" for false and "auto" for true. All other values remain unchanged.

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
Deprecated props
configProxy
Deprecated: this functionality will no longer be provided in the next major release and was deprecated previously.Define a proxy URL for the config fetch request.
stringundefined
-
customConfig
Deprecated: use the main navigation slot to add custom menu entries. This option will be removed in the next major release.Customize the header config loaded from the post portal.
ICustomConfig
languageCookieKey
Deprecated: this will no longer be supported in the next major release due to low usage, in favor of a project-specific solution.The header uses this cookie to set the language. Disables automatic language detection.
stringundefined
-
languageLocalStorageKey
Deprecated: this will no longer be supported in the next major release due to low usage, in favor of a project-specific solution.The header uses this local storage key to set the language. Disables automatic language selection.
stringundefined
'swisspost-internet-header-language'
-
languageSwitchOverrides
Deprecated: use the language menu slot to override the language switch and specify custom URLs. This option will be removed in the next major release.

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[]
login
Deprecated: use the new configuration API to show or hide the login. This option will be removed in the next major release.Toggle the login link (when logged out) or the user widget (when logged in).
boolean
true
logoutUrl
Deprecated: use the new configuration API to specify the logout URL. This option will be removed in the next major release.Overrides the logout-url provided by the portal config.
stringundefined
-
meta
Deprecated: use the new configuration API to show or hide the meta navigation links. This option will be removed in the next major release.Toggle the meta navigation.
boolean
true
osFlyoutOverrides
Deprecated: the new header will no longer include this flyout in the next major release. Use the main navigation slot to add application-specific menu items.Sticky behaviour of the header.
NavMainEntity
search
Deprecated: use the new configuration API to show or hide the search. This option will be removed in the next major release.Toggle the search button.
boolean
true
selfAdminOrigin
Deprecated: use the new configuration API to specify these URLs. This option will be removed in the next major release.

Overrides the selfadmin url in case it needs to differ from the logoutUrl, which is the url that is used by default. The selfadmin url is used in the KLP login widget to set the user menu links.

stringundefined
skiplinks
Deprecated: please implement the skiplinks component. This option will be removed in the next major release.Toggle skiplinks. They help keyboard users to quickly jump to important sections of the page.
boolean
true
stickyness
Deprecated: this option will no longer be configurable with the new header in the next major release.Sticky behaviour of the header.
"full""main""minimal""none"
'minimal'
events
headerLoaded
Fires when the header has been rendered to the page.
void
--
methods
getCurrentLanguage
Deprecated: use document.documentElement.lang instead.Get the currently set language as a two letter string ("de", "fr" "it" or "en")
getCurrentLanguage() => Promise<'de' | 'fr' | 'it' | 'en' | string>
--