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.

Header with Custom Logo Link

For client-side routing applications, such as those built with Angular, React, Next.js, etc., the <post-header> logo component, <post-logo>, can be adapted to fit the specific framework in use. This customization leverages client-side routing to prevent a full page reload when the logo is clicked, ensuring a smoother user experience. To achieve this, the <post-logo> component must be wrapped with a custom link wrapper that handles the routing logic according to the utilized framework.

Steps to use post-logo with a Custom Link

1. Start by using the <post-logo> without a url prop:
When implementing a custom link, ensure the <post-logo> component does not have the url prop set, since this is intended only for rendering a standard HTML link.

<!-- Angular -->
<post-logo>Homepage</post-logo>

<!-- React & Next.js -->
<PostLogo>Homepage</PostLogo>

2. Implement a Custom Link Wrapper around the <post-logo>:
Develop a custom link wrapper that encapsulates the <post-logo> component. This wrapper should manage the routing logic in accordance with the framework being used.

<!-- Angular -->
<a routerLink="#"><post-logo>Homepage</post-logo></a>

<!-- React -->
<Link to="#"><PostLogo>Homepage</PostLogo></Link>

<!-- Next.js -->
<Link href="#"><PostLogo>Homepage</PostLogo></Link>

3. Add the slot="post-logo" attribute to the Custom Link Wrapper:
To ensure the <post-logo> component functions correctly within the header, the post-logo slot must be assigned to the link wrapper.

<!-- Angular -->
<a routerLink="#" slot="post-logo"><post-logo>Homepage</post-logo></a>

<!-- React -->
<Link to="#" slot="post-logo"><PostLogo>Homepage</PostLogo></Link>

<!-- Next.js -->
<Link href="#" slot="post-logo"><PostLogo>Homepage</PostLogo></Link>

Post Header Full Example

<post-header>

  <!-- Logo -->
  <a routerLink="#" slot="post-logo"><post-logo>Homepage</post-logo></a>

  <!-- Meta navigation -->
  <ul class="list-inline" slot="meta-navigation">
    <li><a href="#">Jobs</a></li>
    <li><a href="#">Über uns</a></li>
  </ul>

  <!-- Menu button mobile -->
  <post-togglebutton slot="post-togglebutton">
    <span class="visually-hidden-sm">Menu</span>
    <post-icon aria-hidden="true" name="burger" data-showwhen="untoggled"></post-icon>
    <post-icon aria-hidden="true" name="closex" data-showwhen="toggled"></post-icon>
  </post-togglebutton>

  <!-- Language switch -->
  <post-language-switch
    caption="Change the language"
    description="The currently selected language is English."
    variant="list"
    name="language-switch-example"
    slot="post-language-switch">
    <post-language-option active="false" code="de" name="Deutsch">de</post-language-option>
    <post-language-option active="false" code="fr" name="French">fr</post-language-option>
    <post-language-option active="false" code="it" name="Italiano">it</post-language-option>
    <post-language-option active="true" code="en" name="English">en</post-language-option>
  </post-language-switch>

  <!-- Application title (optional) -->
  <h1 slot="title">Application title</h1>

  <!-- Custom content (optional) -->
  <ul class="list-inline">
    <li>
      <a href="#">
        <span class="visually-hidden-sm">Search</span>
        <post-icon aria-hidden="true" name="search"></post-icon>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="visually-hidden-sm">Login</span>
        <post-icon aria-hidden="true" name="login"></post-icon>
      </a>
    </li>
  </ul>

  <!-- Main navigation -->
  <post-mainnavigation caption="Hauptnavigation">
    <button type="button" slot="back-button" class="btn btn-sm btn-tertiary">
      <post-icon aria-hidden="true" name="arrowright"></post-icon> Back
    </button>
    <post-list title-hidden="">
      <h2>Main Navigation</h2>
      <!-- Link only level 1 -->
      <post-list-item slot="post-list-item"><a href="#">Briefe</a></post-list-item>
      <post-list-item slot="post-list-item"><a href="#">Pakete</a></post-list-item>

      <!-- Level 1 with megadropdown -->
      <post-list-item slot="post-list-item">
        <post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
        <post-megadropdown id="briefe">
          <button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
            <post-icon name="arrowright"></post-icon>
            Back
          </button>
          <post-closebutton slot="close-button">Schliessen</post-closebutton>
          <h2 slot="megadropdown-title">Briefe title</h2>
          <post-list>
            <h3>Briefe senden</h3>
            <post-list-item slot="post-list-item"><a href="#">Briefe Schweiz</a></post-list-item>
            <post-list-item slot="post-list-item"
              ><a href="#">Kleinwaren Ausland</a></post-list-item
            >
            <post-list-item slot="post-list-item"><a href="#">Waren Ausland</a></post-list-item>
            <post-list-item slot="post-list-item"><a href="#">Express und Kurier</a></post-list-item>
          </post-list>
          <post-list>
            <h3><a href="#">Schritt für Schritt</a></h3>
            <post-list-item slot="post-list-item"><a href="#">Pakete Schweiz</a></post-list-item>
            <post-list-item slot="post-list-item"
              ><a href="#">Kleinwaren Ausland</a></post-list-item
            >
            <post-list-item slot="post-list-item"><a href="#">Waren Ausland</a></post-list-item>
            <post-list-item slot="post-list-item"><a href="#">Express und Kurier</a></post-list-item>
          </post-list>
        </post-megadropdown>
      </post-list-item>
      <post-list-item slot="post-list-item">
        <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
        <post-megadropdown id="pakete">
          <button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
            <post-icon name="arrowright"></post-icon>
            Back
          </button>
          <post-closebutton slot="close-button">Schliessen</post-closebutton>
          <h2 slot="megadropdown-title">Pakete title</h2>
          <post-list>
            <h3>Pakete senden</h3>
            <post-list-item slot="post-list-item"><a href="#">Pakete Schweiz</a></post-list-item>
            <post-list-item slot="post-list-item"
              ><a href="#">Kleinwaren Ausland</a></post-list-item
            >
            <post-list-item slot="post-list-item"><a href="#">Waren Ausland</a></post-list-item>
            <post-list-item slot="post-list-item"><a href="#">Express und Kurier</a></post-list-item>
          </post-list>
          <post-list>
            <h3><a href="#">Schritt für Schritt</a></h3>
            <post-list-item slot="post-list-item"><a href="#">Pakete Schweiz</a></post-list-item>
            <post-list-item slot="post-list-item"
              ><a href="#">Kleinwaren Ausland</a></post-list-item
            >
            <post-list-item slot="post-list-item"><a href="#">Waren Ausland</a></post-list-item>
            <post-list-item slot="post-list-item"><a href="#">Express und Kurier</a></post-list-item>
          </post-list>
        </post-megadropdown>
      </post-list-item>
    </post-list>
  </post-mainnavigation>
</post-header>