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.

This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.

Internet Header

Figma Design

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>
--

Use the custom-config property when you need to add your own navigation entries.

The Internet Header supports both flyout (dropdown) and no flyout (simple link) configurations for navigation items. To create a link without a flyout, simply set the noFlyout property to true in your custom configuration.

You can also override the default Online Service Flyout using the osFlyoutOverrides property, which allows you to add custom columns and links.

<swisspost-internet-header
  project="test"
  environment="int01"
  language="en"
  custom-config='{"de":{"header":{"navMain":[{"title":"Meine Links (custom config)","text":"Meine Links","url":"#","flyout":[{"title":"Google","linkList":[{"url":"https://maps.google.com","title":"Google Maps","target":"_blank"},{"url":"https://translate.google.com","title":"Google Translate"}]}]},{"title":"Mein Link (custom config, no flyout)","text":"Mein Link","url":"#","noFlyout":true}]}},"fr":{"header":{"navMain":[{"title":"Meine Links (custom config)","text":"Meine Links","url":"#","flyout":[{"title":"Google","linkList":[{"url":"https://maps.google.com","title":"Google Maps","target":"_blank"},{"url":"https://translate.google.com","title":"Google Translate"}]}]},{"title":"Mein Link (custom config, no flyout)","text":"Mein Link","url":"#","noFlyout":true}]}},"it":{"header":{"navMain":[{"title":"Meine Links (custom config)","text":"Meine Links","url":"#","flyout":[{"title":"Google","linkList":[{"url":"https://maps.google.com","title":"Google Maps","target":"_blank"},{"url":"https://translate.google.com","title":"Google Translate"}]}]},{"title":"Mein Link (custom config, no flyout)","text":"Mein Link","url":"#","noFlyout":true}]}},"en":{"header":{"navMain":[{"title":"Meine Links (custom config)","text":"Meine Links","url":"#","flyout":[{"title":"Google","linkList":[{"url":"https://maps.google.com","title":"Google Maps","target":"_blank"},{"url":"https://translate.google.com","title":"Google Translate"}]}]},{"title":"Mein Link (custom config, no flyout)","text":"Mein Link","url":"#","noFlyout":true}]}}}'
></swisspost-internet-header>

Custom Content

You can add your own content to the main navigation, this content is displayed next to the search button.

Hello, User!

 
<swisspost-internet-header project="test" environment="int01" language="en"
  ><p class="mx-16 mb-0" slot="main">Hello, User!</p></swisspost-internet-header
>

Customizing where the links in the language switch point to using the language-switch-overrides property.

<swisspost-internet-header
  project="test"
  environment="int01"
  language="en"
  language-switch-overrides='[{"lang":"de","url":"/?lang=de"},{"lang":"fr","url":"/?lang=fr"},{"lang":"it","url":"/?lang=it"},{"lang":"en","url":"/?lang=en"}]'
></swisspost-internet-header>

Customising the online service flyout using the os-flyout-overrides property.

<swisspost-internet-header
  project="test"
  environment="int01"
  language="en"
  os-flyout-overrides='{"title":"Custom OS Flyout","text":"Custom OS Flyout","url":"#","flyout":[{"title":"A title","linkList":[{"url":"#bla","title":"Another link"}]},{"title":"Another column","linkList":[{"url":"#foo","title":"Foo"}]}]}'
></swisspost-internet-header>

To access the CSS variables for the header, you need to install an optional stylesheet into your project. Learn more in the header CSS variables stylesheet documentation.

This allows you to implement styling relative to the header.

I am sticky! I am always positioned right below the header when you scroll up and down. 

<style>
  #my-div {
    z-index: 1000;
    top: 0;
    transition: var(--post-header-slide-in-transition);
  }

  swisspost-internet-header.scrolling-up + #my-div {
    top: var(--post-header-height);
  }
</style>
<swisspost-internet-header
  project="test"
  environment="int01"
  language="en"
></swisspost-internet-header>
<p id="my-div" class="position-sticky palette-accent p-16">
  I am sticky! I am always positioned right below the header when you scroll up and down.
</p>