eds-header

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Passing Links as a JSON String (Plain HTML)

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the links as a JSON string:

Here the links attribute is a string. Your getter will parse it into an array of objects.

Passing Links as an Object (Using Property Binding)

In frameworks like React or Angular, you can take advantage of property binding to pass the links directly as an object:

In React

In Angular

In Angular, you would bind the property using square brackets:

And in your Angular component:

In Vue

One way is to explicitly pass a JSON string from your Vue component:

Overview

EdsHeader is a header component designed for the EBRAINS platform. It provides a customizable and responsive navigation experience, tailored for both desktop and mobile views.

Key Features:

Logo Link: Includes a logo that links to the homepage or a specified URL.
Primary Navigation: Displays an array of navigation links for core platform sections.
User Authentication Integration: Supports Keycloak for login and logout, displaying user authentication options when enabled.
Mobile-Friendly Menu: Offers a collapsible mobile menu with additional links, enhancing navigation for smaller screens.
Event-Driven Menu Toggle: Emits a toggle event to handle opening and closing of a fullscreen menu in sync with other components.

This component is well-suited for creating a unified header across the platform with seamless integration of navigation, authentication, and responsive design elements.

Properties

Property	Attribute	Description	Type	Default
`links`	`links`	JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.	`string \| { label: string; url: string; icon?: string; external?: boolean; }[]`	`undefined`
`menu`	`menu`	Flag to enable or disable header menu toggle feature. When true, displays the toggle in the header. Requires the to properly work.	`boolean`	`false`
`url`	`url`	URL for the home logo link. This is the default URL that the logo points to.	`string`	`'/'`
`variant`	`variant`	Header style variant: determines text and background colors. - “default”: text-default on bg-dark - “inverse”: text-default on bg-inverse - “strong”: text-inverse on bg-strongest	`"default" \| "inverse" \| "strong"`	`'default'`

Events

Event	Description	Type
`toggleheadermenu`	Event to signal toggle menu action	`CustomEvent<boolean>`

Dependencies

Depends on

Graph

graph TD;
  eds-header --> eds-logo
  eds-header --> eds-link
  eds-header --> eds-button
  eds-link --> eds-icon-wrapper
  eds-button --> eds-icon-wrapper
  style eds-header fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS