Aside

shadow

The wje-aside is a layout element for additional content next to wje-main. It is most often used for secondary navigation, filters, summary, status bar or auxiliary actions.

Example of use in layout

The sample below shows more common layout combinations with wje-container, wje-header, wje-main and wje-footer. In particular, watch the width attribute, which determines the width of the side column in a particular layout.

What's worth thinking about

• The content is inserted via the default slot.
• The width sets the CSS variable --wje-aside-width, the resulting width of the panel.
• For the fixed component on desktop breakpoints, it uses position: fixed.
• The top is applied along with fixed and sets the top offset via --wje-aside-top.
• On smaller viewports, the aside is hidden by default. The top-start variant and the open class deal with the layout, not the actual state logic of the component.

Accessibility

• Use it where secondary content actually makes sense alongside main, not instead of it.
• Maintain the logical structure of the document and the order of focusable elements.
• If it appears on mobile as a slide-out panel managed by a parent application, be sure to handle focus management at the level of that parent logic.

Recommended practices

• Be conscious of the width based on the type of content; a stable fixed width is often sufficient for navigation, but a tokenized CSS variable is worthwhile for richer content.
• If you use fixed, always keep top in mind so that the aside does not overlap with the fixed header.
• On mobile, test the behaviour separately; default desktop layout does not automatically mean a good mobile UX.
• Use the sidebar for supplemental content, not what's critical to completing the user's main task.

Attributes and properties

fixed

Popis	Určuje, či je voľba fixed zapnutá a ovplyvňuje správanie komponentu.
Atribút	fixed
Typ	boolean
Predvolené	-

top

Popis	Nastavuje textovú hodnotu uloženú vo voľbe top.
Atribút	top
Typ	string
Predvolené	-

variant

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	variant
Typ	string
Predvolené	-

width

Popis	Nastavuje rozmery alebo veľkosť pre voľbu width.
Atribút	width
Typ	string
Predvolené	-

Events

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

Methods

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

CSS shadow parts

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS custom variables

Názov	Popis
--wje-aside-width	Vlastná CSS premenná, ktorá riadi šírku bočného stĺpca aside.
--wje-aside-top	Vlastná CSS premenná, ktorá riadi horný offset fixného aside.
--wje-aside-border-color	Vlastná CSS premenná, ktorá riadi farbu okraja aside.
--wje-aside-border-width	Vlastná CSS premenná, ktorá riadi šírku okraja aside.
--wje-aside-border-style	Vlastná CSS premenná, ktorá riadi štýl okraja aside.

Slots

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