Header

shadow

The header is part of the layout elements and is displayed at the top. It is mostly used to display navigation, logos, etc. When the header is sticky, its layer order is controlled with the --wje-header-z-index CSS variable so it can work alongside overlay components and mobile panels.

Basic use

The separate sample below shows the header in the simplest vertical layout with the main content below it.

note

For information on using the Header element, navigate to the [Layout] documentation(./layout).

When to use

Use wje-header to compose a stable page layout with a clear content hierarchy.

When not to use

Do not use it to solve business logic or for stateful orchestration of components.

Accessibility

Preserve the semantics of the document (header, main, aside, footer) and the logical order of focusable elements.

Recommended practices

• Define desktop/mobile breakpoints first and then fine-tune the details.
• Prefer consistent spacing tokens over ad-hoc margin/padding values.
• For layouts with overflow, always test keyboard navigation and readers.

Attributes and properties

Pre tento komponent nie sú dostupné žiadne vlastnosti.

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Názov	Popis
--wje-header-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-header-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-header-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-header-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-header-top	Vlastná CSS premenná na štýlovanie komponentu (top).
--wje-header-height	Vlastná CSS premenná, ktorá riadi height.
--wje-header-z-index	Vlastná CSS premenná na štýlovanie komponentu (z index).

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.