Header
The header is part of the layout elements and is displayed at the top. It is mostly used to display navigation, logos, etc.
Examples of use
note
For information on using the Header element, navigate to the Layout documentation.
When to use
Use wje-header to compose stable page structure with clear visual and semantic hierarchy.
When not to use
Do not use layout components to handle business logic or application orchestration.
Accessibility
Preserve document semantics (header, main, aside, footer) and logical tab/focus order.
Best Practices
- Define mobile/desktop breakpoints first, then refine visual details.
- Prefer spacing tokens over ad-hoc margin/padding overrides.
- Test keyboard and screen reader behavior for overflow scenarios.
Attributes and Properties
No properties available for this component.
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-header-background | The background of the header element. |
--wje-header-border-color | The border color of the header element. |
--wje-header-border-width | The border width of the header element. |
--wje-header-border-style | The border styles of the header. |
--wje-header-top | The position top of the header. |
--wje-header-height | The height of the header element. |
Slots
| Name | Description |
|---|---|
default | Default slot for the header content. |